实现效果如下，在编辑表格的同时可以实现字段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结果（实例代码),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！