jQuery实现可编辑表格并生成json结果(实例代码)

200 阅读 0 评论 132 点赞

我是靠谱客的博主冷酷帅哥，最近开发中收集的这篇文章主要介绍jQuery实现可编辑表格并生成json结果(实例代码)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

实现效果如下，在编辑表格的同时可以实现字段json内容的自动变化，点击提交可以保存到后台，页面加载的时候自动解析json并加载表格内容。该代码解析和加载功能都用前端js实现，简化了后台代码逻辑。

定义要操作的表格头：

<input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name="scorerange"/> 
                      <table id="mytable"> 
                          <tr> 
                            <th style="width: 20%;">分数区间</th><th style="width:20%;">等级</th><th style="width:60%;">建议内容</th><th></th> 
                       </tr> 
                         <!--                         <tr><td><input onblur="caljson()" type="text" style="width: 50px;" >-<input type="text" style="width: 50px;" /></td> 
                          <td><input onblur="caljson()" type="text" style="width: 100%;" ></td> 
                          <td><input onblur="caljson()" id="btn1" type="button" onclick="$(this).parent().parent().remove()" value="删除" /></td></tr>                        -->                       </table>

定义操作代码

function insertRowLast(newrow,s1,s2,s3,s4) { 
  if(newrow){ 
    var newRow = "<tr><td><input onblur="caljson()" value="0" type="text" style="width: 50px;" >-<input value="0" type="text" style="width: 50px;" /></td>"; 
    newRow+="<td><input  onblur="caljson()"  type="text" style="width: 50px;" ></td>"; 
    newRow+="<td><input maxlength="24" onblur="caljson()"  type="text" style="width: 100%;" ></td>"; 
    newRow+="<td><input  onblur="caljson()"  id="btn1" type="button" onclick="$(this).parent().parent().remove();caljson();" value="删除" /></td></tr>"; 
    $("#mytable tr:last").after(newRow); 
  }else{ 
    var newRow = "<tr><td><input value=""+s1+"" onblur="caljson()" type="text" style="width: 50px;" >-<input value=""+s2+"" type="text" style="width: 50px;" /></td>"; 
    newRow+="<td><input value=""+s4+""  onblur="caljson()"  type="text" style="width: 50px;" ></td>"; 
    newRow+="<td><input maxlength="24" value=""+s3+""  onblur="caljson()"  type="text" style="width: 100%;" ></td>"; 
    newRow+="<td><input  onblur="caljson()"  id="btn1" type="button" onclick="$(this).parent().parent().remove();caljson();" value="删除" /></td></tr>"; 
    $("#mytable tr:last").after(newRow); 
  } 
  caljson(); 
} 
var json=""; 
function caljson(){ 
 json="{"scorerange":["; 
 var idx = 0;  
 var idxlen = $("#mytable").find("tr").length; 
 $("#mytable").find("tr").each(function () { 
  if(idx==0){ 
  idx++; 
    return; 
  } 
　　var tdArr = $(this).children(); 
  var v1 = tdArr.eq(0).find('input').eq(0).val(); 
  var v2 = tdArr.eq(0).find('input').eq(1).val(); 
  var v3 = tdArr.eq(2).find('input').val(); 
  var v4 = tdArr.eq(1).find('input').val(); 
  json+="{"s1":""+v1+"","s2":""+v2+"","content":""+v3+"","classg":""+v4+""}"; 
  idx++; 
  if(idx!=idxlen){ 
  json+=","; 
  } 
}); 
json+="]}"; 
$("#scorerange").val(json); 
//alert($("#scorerange").val()); 
} 
//alert(1); 
//alert($("#scorerange").val()); 
var dataObj=eval("($!{tbscence.scorerange})"); 
if(dataObj && dataObj.scorerange){ 
 //alert(dataObj.scorerange.length); 
 for(var i=0;i<dataObj.scorerange.length;i++){ 
  var s1 = dataObj.scorerange[i].s1; 
  var s2 = dataObj.scorerange[i].s2; 
  var s3 = dataObj.scorerange[i].content; 
  var s4 = dataObj.scorerange[i].classg; 
  //alert(s1+" "+s2+" "+s3); 
  insertRowLast(false,s1,s2,s3,s4); 
 } 
}else{ 
 insertRowLast(true,0,0,0,0); 
}

总结

以上所述是小编给大家介绍的jQuery实现可编辑表格并生成json结果(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！