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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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版(5)
2006/10/09 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python2 与 python3 实现共存的方法
2018/07/12 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
学习python需要有编程基础吗
2020/06/02 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
英文自荐信格式
2013/11/28 职场文书
医院总经理职责
2013/12/26 职场文书
校园十大歌手策划书
2014/02/01 职场文书
保护母亲河倡议书
2014/04/14 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
数学备课组工作总结
2015/08/12 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS