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

表格结构

假定表格结构如上一篇一样，如下：

<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数据，代码实现如下：

// 将 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后端，进行处理保存等工作：

// 发送 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数据的全部工作。