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结果(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:jQuery实现可编辑表格并生成json结果(实例代码)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。