如何将Html页面表格数据转换成JSON

上一篇我们研究了如何将JSON文件转换成Html表格数据，本次我们来做个反向研究：如何将Html表格数据转换成JSON，便于保存及传输。

### 表格结构
假定表格结构如上一篇一样，如下：
```html
<table id="data-table">
  <thead>
    <tr>
      <th>name</th>
      <th>url</th>
      <th>location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>百度</td>
      <td>www.baidu.com</td>
      <td>中国</td>
    </tr>
	<tr>
      <td>google</td>
      <td>www.google.com</td>
      <td>美国</td>
    </tr>
	<tr>
      <td>微博</td>
      <td>www.weibo.com</td>
      <td>中国</td>
    </tr>
  </tbody>
</table>
```

### 将HTML表格数据转为JSON
我们将循环每行数据，根据列的先后来组合成JSON数据，代码实现如下：
```javascript
// 将 HTML 表格数据转换为 JSON 对象
function tableToJson(table) {
  var result = []; // 存储转换后的 JSON 对象

// 遍历表格的每一行
  table.find('tbody tr').each(function() {
    var row = {}; // 存储每一行的数据

// 遍历当前行的每一列
    (this).find('td').each(function(index, item) {
      var columnName = table.find('thead th').eq(index).text(); // 列名
      var cellData =(this).text(); // 单元格数据

row[columnName] = cellData; // 存储列名和单元格数据
    });

result.push(row); // 将行数据添加到结果数组中
  });

return result; // 返回最终的 JSON 对象
}

// 示例用法
var table = $('table');
var json = tableToJson(table);
console.log(json);
```

### 将JSON数据传输到后端保存
我们利用JQeury的Ajax将数据Post后端，进行处理保存等工作：
```javascript
// 发送 JSON 对象到服务器端
$.ajax({
  url: '/api/save',
  method: 'POST',
  data: JSON.stringify(json),
  contentType: 'application/json',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});
```

### 结束
至此，就完成了将Html表格数据转换成JSON数据的全部工作。

钱三爷的窝

如何将Html页面表格数据转换成JSON