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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现穿梭框效果
Jan 19 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python yield使用方法示例
2013/12/04 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
实习老师离校感言
2014/02/03 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记