欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-24 08:22:49
实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容。该代码解析和加载功能都用前端js实现...

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

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

定义要操作的表格头:

<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结果(实例代码),希望对大家有所帮助