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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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
改进的IP计数器
2006/10/09 PHP
关于页面优化和伪静态
2009/10/11 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
js跳转页面方法实现汇总
2014/02/11 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
js实现适配不同的屏幕大小
2017/04/10 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
50道外企软件测试面试题
2014/08/18 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
员工自我鉴定范文
2013/10/06 职场文书
入团者的自我评价分享
2013/12/02 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
项目申请汇报材料
2014/08/16 职场文书
运动会表扬稿
2015/01/16 职场文书
《社戏》教学反思
2016/02/22 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Python实现生活常识解答机器人
2021/06/28 Python