网站优化

小程序模板源码免费_jQuery完成可修改表格并生成

作者:admin 发布时间:2021-01-11
jQuery实现可编辑表格并生成json结果(实例代码)       这篇文章主要介绍了 jquery实现可编辑表格并生成json结果,该代码解析和加载功能都用前端js实现,简化了后台代码逻辑,非常不错,具有参考借鉴加载,需要的朋友可以参考下

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

定义要操作的表格头:

 input readonly="readonly" type="text" id="scorerange" value="" name="scorerange"/ 
 table id="mytable" 
 th 分数区间 /th th 等级 /th th 建议内容 /th th /th 
 /tr 
 !-- tr td input onblur="caljson()" type="text" - input type="text" / /td 
 td input onblur="caljson()" type="text" /td 
 td input onblur="caljson()" id="btn1" type="button" value="删除" / /td /tr -- /table 

定义操作代码

function insertRowLast(newrow,s1,s2,s3,s4) { 
 if(newrow){ 
 var newRow = " tr td input onblur=\"caljson()\" value=\"0\" type=\"text\" "width: 50px;\" - input value=\"0\" type=\"text\" "width: 50px;\" / /td 
 newRow+=" td input onblur=\"caljson()\" type=\"text\" "width: 50px;\" /td 
 newRow+=" td input maxlength=\"24\" onblur=\"caljson()\" type=\"text\" "width: 100%;\" /td 
 newRow+=" td input onblur=\"caljson()\" id=\"btn1\" type=\"button\" "$(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\" "width: 50px;\" - input value=\""+s2+"\" type=\"text\" "width: 50px;\" / /td 
 newRow+=" td input value=\""+s4+"\" onblur=\"caljson()\" type=\"text\" "width: 50px;\" /td 
 newRow+=" td input maxlength=\"24\" value=\""+s3+"\" onblur=\"caljson()\" type=\"text\" "width: 100%;\" /td 
 newRow+=" td input onblur=\"caljson()\" id=\"btn1\" type=\"button\" "$(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结果(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!



收缩