js与jQuery实现获取table中的数据并拼成json字符串操作示例


Posted in jQuery onJuly 12, 2018

本文实例讲述了js与jQuery实现获取table中的数据并拼成json字符串操作。分享给大家供大家参考,具体如下:

核心代码如下:

JavaScript代码:

function tabToJSON(id) {
    var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组
    var titles = trs[0].getElementsByTagName("td");  //获得表头td数组
    var json = "";
    for(var i = 1; i < trs.length; i++) {
      var tds = trs[i].getElementsByTagName("td");  
      json += "{"; 
      //拼装json
      for(var j = 0; j < tds.length; j++) 
        json += titles[j].innerHTML + ":" + tds[j].innerHTML + ",";
      json = json.substring(0, json.length - 1) + "},";
    }
    json = "[" + json.substring(0, json.length - 1) + "]";
    document.getElementById("test").innerHTML = json;
}

jQuery代码:

function tabToJSONForJquery(id) {
    var titles = $("#" + id).find("tr:first td");  //获得表头td数组
    //遍历非表头的,tr、td...拼装json
    var json = "[" + $("#" + id).find("tr:not(:first)").map(function(i, e) {
      return "{" + $(e).children("td").map(function(j, el) {
        return $(titles[j]).html() + ":" + $(el).html();
      }).get().join(",") + "}";
    }).get().join(",") + "]";
    $("#test").html(json);
}

注:为便于测试,建议jQuery直接使用cdn如:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

测试HTML部分(table表格与json数据显示部分):

<table id="tbl" border="1">
<tr><td>编号</td><td>年龄</td><td>单元</td><td>房间号</td></tr>
<tr><td>1</td><td>25</td><td>1</td><td>1-2</td></tr>
<tr><td>2</td><td>22</td><td>1</td><td>1-1</td></tr>
<tr><td>3</td><td>21</td><td>3</td><td>3-3</td></tr>
<tr><td>4</td><td>20</td><td>2</td><td>2-2</td></tr>
<tr><td>5</td><td>35</td><td>4</td><td>4-2</td></tr>
</table>
<div id="test"></div>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试得到json数据为:

[{编号:1,年龄:25,单元:1,房间号:1-2},{编号:2,年龄:22,单元:1,房间号:1-1},{编号:3,年龄:21,单元:3,房间号:3-3},{编号:4,年龄:20,单元:2,房间号:2-2},{编号:5,年龄:35,单元:4,房间号:4-2}]

感兴趣的朋友亲自动手测试一下看看效果如何

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
You might like
PHP 简单日历实现代码
2009/10/28 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
详解php实现页面静态化原理
2017/06/21 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python素数检测的方法
2015/05/11 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
深入了解Python 变量作用域
2020/07/24 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
银行柜员求职自荐书
2014/06/18 职场文书
三年级学生评语大全
2014/12/26 职场文书
交通事故起诉书
2015/05/19 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python