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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 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
DISCUZ 分页代码
2007/01/02 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python中title()方法的使用简介
2015/05/20 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
小区门卫工作职责
2013/12/14 职场文书
活动总结的格式
2014/05/07 职场文书
中文专业求职信
2014/06/20 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
档案工作个人总结
2015/03/03 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技