html table 转json

最新推荐文章于 2026-01-02 01:54:14 发布

原创最新推荐文章于 2026-01-02 01:54:14 发布 · 6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #tabletojson

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何将HTML表格转换为JSON格式，包括表格的规范设置、JavaScript脚本实现及特殊格式转换方法，适合前端开发者处理表格数据时使用。

html table 转json

max.bai

2018-01

最近django做接口平台，前端需要table转json格式，自己写了一个，记录一下

1. html table 设置

首先规范table格式

a. table一定要有thead th，tbody

b. 每个th 要有name属性，name的值将用来做json里么的key值

c. td 中需要获得值得控件添加jsonval 属性，不用设置值，这样脚本就知道要取哪个控件的值了，没有设置jsonval，值默认设置为空字符串

例子：

<table class="table" id="pcheck_items"> 
   <thead> 
    <tr> 
     <th name="check_key">Key</th> 
     <th name="check_module">Validation</th> 
     <th name="check_value">Expect</th> 
     <th name="action"></th> 
    </tr> 
   </thead> 
   <tbody>
    <tr>
     <td><input josnval="" id="check_keypath" class="form-control" value="" /></td>
     <td><select josnval="" class="form-control" id="pcheck_module"><option value="backend.utils.DefaultChecker.Contains">Contains</option><option value="backend.utils.DefaultChecker.End_with">End_with</option><option value="backend.utils.DefaultChecker.Equal">Equal</option><option value="backend.utils.DefaultChecker.Josn_check">Josn_check</option><option value="backend.utils.DefaultChecker.Start_with">Start_with</option><option value="backend.utils.DefaultChecker.XML_check">XML_check</option></select></td>
     <td><input josnval="" id="check_value" class="form-control" value="" /></td>
     <td><a href="javascript:void(0);" onclick="RemoveChecker(this)" class="btn btn-danger btn-xs" title="Remove"><i class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr>
     <td><input josnval="" id="check_keypath" class="form-control" value="" /></td>
     <td><select josnval="" class="form-control" id="pcheck_module"><option value="backend.utils.DefaultChecker.Contains">Contains</option><option value="backend.utils.DefaultChecker.End_with">End_with</option><option value="backend.utils.DefaultChecker.Equal">Equal</option><option value="backend.utils.DefaultChecker.Josn_check">Josn_check</option><option value="backend.utils.DefaultChecker.Start_with">Start_with</option><option value="backend.utils.DefaultChecker.XML_check">XML_check</option></select></td>
     <td><input josnval="" id="check_value" class="form-control" value="" /></td>
     <td><a href="javascript:void(0);" onclick="RemoveChecker(this)" class="btn btn-danger btn-xs" title="Remove"><i class="fa fa-trash-o"></i></a></td>
    </tr>
    <tr>
     <td><input josnval="" id="check_keypath" class="form-control" value="" /></td>
     <td><select josnval="" class="form-control" id="pcheck_module"><option value="backend.utils.DefaultChecker.Contains">Contains</option><option value="backend.utils.DefaultChecker.End_with">End_with</option><option value="backend.utils.DefaultChecker.Equal">Equal</option><option value="backend.utils.DefaultChecker.Josn_check">Josn_check</option><option value="backend.utils.DefaultChecker.Start_with">Start_with</option><option value="backend.utils.DefaultChecker.XML_check">XML_check</option></select></td>
     <td><input josnval="" id="check_value" class="form-control" value="" /></td>
     <td><a href="javascript:void(0);" onclick="RemoveChecker(this)" class="btn btn-danger btn-xs" title="Remove"><i class="fa fa-trash-o"></i></a></td>
    </tr>
   </tbody> 
  </table>

2. js脚本

  function HtmlTableToJson(tableid){
    // table need set thead and tbody
    // talbe head need set name attr
    // value control need set josnval attr or will get null string
    var jsondata = [];
    // table head
    var heads = [];
    $("#"+tableid+' thead th').each(function(index,item){
      heads.push($(item).attr('name'));
    });
    // tbody
    $("#"+tableid+' tbody tr').each(function(index, item){
      var rowdata = {};
      $(item).find('td').each(function(index,item){
        if($(item).find('[josnval]').size()>0){
          console.log("have json val");
          rowdata[heads[index]] = $(item).find('[josnval]').val();
        }else{
          console.log("no jsonval");
          rowdata[heads[index]] = "";
        }
      });
      jsondata.push(rowdata);
    });
    return jsondata;
  };

返回结果：

[
    {
        "check_key": "12123", 
        "check_module": "backend.utils.DefaultChecker.Contains", 
        "check_value": "111111", 
        "action": ""
    }, 
    {
        "check_key": "22323232", 
        "check_module": "backend.utils.DefaultChecker.End_with", 
        "check_value": "22222", 
        "action": ""
    }, 
    {
        "check_key": "", 
        "check_module": "backend.utils.DefaultChecker.End_with", 
        "check_value": "3232323", 
        "action": ""
    }
]

3. 另外一种格式转换

当table只有两列，一列值做key，第二列值做value时，转换成json对象。

转换出来的结果：

{
    "name":"max.bai",
    "age":12
}

转换脚本：

function HtmlTableToJson2(tableid){
    // return data = {"key1":value1, "key2":value2}
    // table need set thead and tbody
    // talbe head need set name attr
    // value control need set josnval attr or will get null string
    var jsondata = {};
    // tbody
    $("#"+tableid+' tbody tr').each(function(index, item){
      var key = $(item).find('td').eq(0).find('[josnval]').val();
      var value = $(item).find('td').eq(1).find('[josnval]').val();
      jsondata[key] = value;
    });
    return jsondata;
  };