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 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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 array_push 数组函数
2009/12/26 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python3.6实现学生信息管理系统
2019/02/21 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python2与Python3的区别详解
2020/02/09 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
动态密码技术
2012/10/18 面试题
十一个高级MySql面试题
2014/10/06 面试题
英语演讲稿范文
2014/01/03 职场文书
大学新生军训方案
2014/05/03 职场文书
高一军训的心得体会
2014/09/01 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
文书工作总结(范文)
2019/07/11 职场文书