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

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

定义要操作的表格头：

input readonly=' readonly ' class=' form-control ' type=' text ' id=' score range ' value=' name=' score range '/table id=' my table ' tr th style=' width : 20%；'分数区间/thth style=' width :20%；'等级/thth style=' width :60%；'建议内容/th/th/tr！-trtdinput on bulr=' caljson()' type=' text ' style=' width : 50px；-输入类型=' text ' style=' width : 50px '/TD TD输入on bulr=' caljson()' type=' text ' style=' width : 100%；/TD tdinput on bulr=' caljson()' id=' BTN 1 ' type=' button ' onclick=' $(this).父项()。父项()。remove()"value="删除//TD/tr-/表格定义操作代码

函数insertRowLast(newrow，s1，s2，s3，S4){ if(new row){ var new row=' trtdinput on bulr=\ ' caljson()\ ' value=\ ' 0 ' type=\ ' text ' style=\ ' width : 50px；\ '-输入值=\ ' 0 ' type=\ ' text ' style=\ ' width : 50px；\ '//TD '；新行=' tdinput on bulr=\ ' caljson()\ ' type=\ ' text ' style=\ ' width : 50px；\ '/TD '；新行=' tdinput maxlength=\ ' 24 ' on bulr=\ ' caljson()\ ' type=\ ' text ' style=\ ' width : 100%；\ '/TD '；new RoW=' TD input on bulr=\ ' caljson()\ ' id=\ ' BTN 1 ' type=\ ' button ' onclick=\ ' $(this).父项()。父项()。移除();caljson()；\ '值=\ '删除\ '//TD/tr '；$('#mytable tr:last ').在(新世界)之后；} else { var new row=' trtdinput value=\ ' S1 ' \ ' on bulr=\ ' caljson()\ ' type=\ ' text ' style=\ ' width : 50px；\ '-输入值=\“S2”类型=\ ' text ' style=\ ' width : 50px；\ '//TD '；新行=' TD输入值=\ ' ' S4 ' \ '在bulr=\ ' caljson()\ '上类型=\ ' text ' style=\ ' width : 50px；\ '/TD '；新行=' tdinput maxlength=\ ' 24 ' value=\ ' S3 ' \ ' on bulr=\ ' caljson()\ ' type=\ ' text ' style=\ ' width : 100%；\ '/TD '；new RoW=' TD input on bulr=\ ' caljson()\ ' id=\ ' BTN 1 ' type=\ ' button ' onclick=\ ' $(this).父项()。父项()。移除();caljson()；\ '值=\ '删除\ '//TD/tr '；$('#mytable tr:last ').在(新世界)之后；} caljson()；} var json=函数caljson(){ JSON=' { \ '得分范围' :['；var idx=0；var idxlen=$('#mytable ').查找(' tr ').长度；$('#mytable ').查找(' tr ').每个（函数(){ if(idx==0){ idx；返回；} var tdArr=$(this).儿童();var v1=tdArr.eq(0).查找('输入')。等式(0).val()；var v2=tdArr.eq(0).查找('输入')。等式(1)。val()；var v3=tdArr.eq(2).查找('输入')。val()；var v4=tdArr.eq(1).查找('输入')。val()；json=' { \ ' s1 \ ' : \ ' ' v1 ' \ '，\ ' s2 \ ' : \ ' ' v2 ' \ '，\ ' content \ ' : \ ' ' v3 ' \ '，\ ' class ' : \ ' v4 ' \ ' idxif(idx！=idxlen){ json='，'；} });JSON=']} '；$('#scorerange ').val(JSON)；//alert($(“# score range”).val())；}//alert(1)；//alert($(“# score range”).val())；var dataObj=eval('($！{ tbscene。分数范围})')；if(DataObj。数据对象。分数范围){//alert(DataObj。得分范围。长度)；for(var I=0；idataobj。得分范围。长度；I){ var S1=DataObj。分数范围[I]。S1；var S2=DataObj。分数范围[I]。S2；var s3=dataObj.scorerange[i].内容；var s4=dataObj.scorerange[i].分类；//警戒(S1 ' ' S2 ' ' S3)；insertRowLast(false，s1，s2，s3，S4)；} }else{ insertRowLast(true，0，0，0)；} 总结

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