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日历价格、库存等设置插件
Jul 05 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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禁止个别IP访问网站
2013/10/30 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
JS高级笔记
2011/07/13 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python实现简单加密解密机制
2019/03/19 Python
python实现大量图片重命名
2020/03/23 Python
Python内置函数property()如何使用
2020/09/01 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
门卫岗位职责
2013/11/15 职场文书
自荐书封面下载
2013/11/29 职场文书
群众路线剖析材料
2014/02/02 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
摄影展策划方案
2014/06/02 职场文书
物业保安岗位职责
2014/07/02 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL