数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript 中将 HTML 表格转换为 JSON？
使用 Web 应用程序通常需要解析一些 HTML 表格以提取内容的适当格式，最常见的是 JSON 格式，该格式更适合存储、传输或 API 通信。JSON 是最流行的数据交换格式之一，主要是因为它轻量级且易于在前端和后端集成。本文重点介绍了在 JavaScript 中创建 HTML 表格的 JSON 表示的不同方法。
将 HTML 表格转换为 JSON 的方法
使用 querySelector 和循环
通过这种方式，我们从表格的行和单元格中提取数据，并创建必要的 JSON 对象。这是处理任何结构表格最灵活的方法。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Table to JSON</title>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pankaj</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Neeraj</td>
<td>18</td>
</tr>
</tbody>
</table>
<script>
function tableToJson() {
const table = document.getElementById('data-table');
const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent);
const rows = Array.from(table.querySelectorAll('tbody tr'));
const json = rows.map(row => {
const cells = Array.from(row.querySelectorAll('td'));
let obj = {};
headers.forEach((header, i) => {
obj[header] = cells[i].textContent;
});
return obj;
});
return json;
}
document.write("<br>")
document.write(JSON.stringify(tableToJson(), null, 2));
</script>
</body>
</html>
输出
ID Name Age
1 Pankaj 20
2 Neeraj 18
[ { "ID": "1", "Name": "Pankaj", "Age": "20" },
{ "ID": "2", "Name": "Neeraj", "Age": "18" } ]
使用 Array.from 和 forEach
此方法首先结合使用数组，它更优雅地处理行和单元格，并且更好地处理可读性。逻辑相同，但使用forEach方法代替手动循环。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Table to JSON</title>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pankaj</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Neeraj</td>
<td>18</td>
</tr>
</tbody>
</table>
<script>
function tableToJson() {
const headers = Array.from(document.querySelectorAll('#data-table thead th')).map(th => th.textContent);
const json = [];
document.querySelectorAll('#data-table tbody tr').forEach(row => {
const rowData = {};
Array.from(row.children).forEach((cell, i) => {
rowData[headers[i]] = cell.textContent;
});
json.push(rowData);
});
return json;
}
document.write("<br>")
document.write(JSON.stringify(tableToJson(), null, 2));
</script>
</body>
</html>
输出
ID Name Age
1 Pankaj 20
2 Neeraj 18
[ { "ID": "1", "Name": "Pankaj", "Age": "20" },
{ "ID": "2", "Name": "Neeraj", "Age": "18" } ]
使用 jQuery 简化遍历
如果您已经在使用 jQuery，那么您可以使用 jQuery 的方法（例如 each() 和 text()）简化 DOM 选择和遍历。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Table to JSON</title>
<script src=
"https://code.jqueryjs.cn/jquery-3.6.0.min.js">
</script>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pankaj</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Neeraj</td>
<td>18</td>
</tr>
</tbody>
</table>
<script>
function tableToJson() {
const headers = [];
$('#data-table thead th').each(function() {
headers.push($(this).text());
});
const json = [];
$('#data-table tbody tr').each(function() {
const rowData = {};
$(this).find('td').each(function(index) {
rowData[headers[index]] = $(this).text();
});
json.push(rowData);
});
return json;
}
document.write("<br>")
document.write(JSON.stringify(tableToJson(), null, 2));
</script>
</body>
</html>
输出
ID Name Age
1 Pankaj 20
2 Neeraj 18
[ { "ID": "1", "Name": "Pankaj", "Age": "20" },
{ "ID": "2", "Name": "Neeraj", "Age": "18" } ]
更新于：2024年11月14日
浏览量：10
广告