JavaScript与jQuery提取表格数据生成JSON字符串的方法

JavaScript与jQuery提取表格数据生成JSON字符串的方法

本文详细介绍如何利用JavaScript和jQuery技术，从HTML表格中提取数据并将其转换为JSON字符串格式。该方案旨在为开发者提供实用的参考示例，便于在实际项目中应用。

以下是实现该功能的核心代码逻辑。

使用原生JavaScript实现的代码如下：

function tabToJSON(id) {
    var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组
    var titles = trs[0].getElementsByTagName("td");  //获得表头td数组
    var json = "";
    for(var i = 1; i < trs.length; i++) {
      var tds = trs[i].getElementsByTagName("td");  
      json += "{"; 
      //拼装json
      for(var j = 0; j < tds.length; j++) 
        json += titles[j].innerHTML + ":" + tds[j].innerHTML + ",";
      json = json.substring(0, json.length - 1) + "},";
    }
    json = "[" + json.substring(0, json.length - 1) + "]";
    document.getElementById("test").innerHTML = json;
}

使用jQuery库实现的代码如下：

function tabToJSONForJquery(id) {
    var titles = $("#" + id).find("tr:first td");  //获得表头td数组
    //遍历非表头的，tr、td...拼装json
    var json = "[" + $("#" + id).find("tr:not(:first)").map(function(i, e) {
      return "{" + $(e).children("td").map(function(j, el) {
        return $(titles[j]).html() + ":" + $(el).html();
      }).get().join(",") + "}";
    }).get().join(",") + "]";
    $("#test").html(json);
}

注意：为了方便测试，建议直接通过CDN引入jQuery，例如使用以下链接：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

测试用的HTML结构部分，包含表格展示与JSON数据显示区域：

<table id="tbl" border="1">
<tr><td>编号</td><td>年龄</td><td>单元</td><td>房间号</td></tr>
<tr><td>1</td><td>25</td><td>1</td><td>1-2</td></tr>
<tr><td>2</td><td>22</td><td>1</td><td>1-1</td></tr>
<tr><td>3</td><td>21</td><td>3</td><td>3-3</td></tr>
<tr><td>4</td><td>20</td><td>2</td><td>2-2</td></tr>
<tr><td>5</td><td>35</td><td>4</td><td>4-2</td></tr>
</table>
<div id="test"></div>

测试结果示例

可通过在线HTML/CSS/JavaScript代码运行工具（如：http://tools.jb51.net/code/HtmlJsRun）进行测试，生成的JSON数据示例如下：

[{编号:1,年龄:25,单元:1,房间号:1-2},{编号:2,年龄:22,单元:1,房间号:1-1},{编号:3,年龄:21,单元:3,房间号:3-3},{编号:4,年龄:20,单元:2,房间号:2-2},{编号:5,年龄:35,单元:4,房间号:4-2}]

建议读者亲自动手测试，以验证代码效果。

相关工具推荐

此外，推荐几款相关的JSON在线工具供参考：

在线JSON代码检验、格式化及美化工具： http://tools.jb51.net/code/json

JSON在线格式化工具： http://tools.jb51.net/code/jsonformat

在线XML与JSON互转工具： http://tools.jb51.net/code/xmljson

JSON代码在线格式化、美化、压缩、编辑及转换工具： http://tools.jb51.net/code/jsoncodeformat

在线JSON压缩与转义工具： http://tools.jb51.net/code/json_yasuo_trans

如需了解更多JavaScript相关内容，可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述内容能对大家的JavaScript程序设计有所帮助。