html table 转json

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":""}]

有待优化，等有空了再搞。。