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


Posted in jQuery onJuly 19, 2017

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

jQuery 相关文章推荐
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
You might like
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
思想汇报格式
2014/01/05 职场文书
运动会广播稿200米
2014/01/27 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers