数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

河北排列7开奖记录:js与jQuery实现获取table中的数据并拼成json字符串操作示例

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 本文实例讲述了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="//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代码运行工具//tools.jb51.net/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}]

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

PS:这里再为大家推荐几款相关的json在线工具供大家参考:

在线JSON代码检验、检验、美化、格式化工具:
//tools.jb51.net/code/json

JSON在线格式化工具:
//tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
//tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
//tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:
//tools.jb51.net/code/json_yasuo_trans

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:


  • 本文相关:
  • 通过jquery的ajax方法读取将table转换为json
  • jquery+json实现动态创建复杂表格table的方法
  • jquery实现table行折叠效果以json做数据源
  • jquery通过ajax请求php遍历json数组到table中的代码(推荐)
  • js实现将json数组显示前台table中
  • js中将字符串转换成json的三种方式
  • 解析json对象与字符串之间的相互转换
  • js对象与json格式数据相互转换
  • jquery遍历json数组的3种方法
  • 使用jsonp完美解决跨域问题
  • jquery中读取json文件示例代码
  • 代码短小的js div层拖动实现代码[兼容ie与firefox]
  • javascript 简单抽屉效果的实现代码
  • js onclick事件传参讲解
  • js轮播图透明度切换(带上下页和底部圆点切换)
  • js实现炫酷的左右轮播图
  • js+css实现简易实用的滑动门菜单效果
  • ie无法设置短域名下cookie
  • javascript es6中对象类型sets的介绍与使用详解
  • 基于构造函数的五种继承方法小结
  • 基于javascript短信验证码如何实现
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • “网络党课”第二课 杨禹《为美好生活而奋斗》 2018-12-14
  • DJ音乐绽放江西之巅 萍乡武功山帐篷节成功举办 2018-12-14
  • 巫山县大峡村:深度贫困村的脱贫之变 2018-12-13
  • 【上海天气】最新上海今天天气,实时提供上海气温、空气质量、24小时天气预报、生活指数查询 2018-12-13
  • VRAR从热转凉 追风上市公司“跌落神坛”追风上市公司“跌落神坛”-手机行情 2018-12-13
  • 招聘启事丨西部网诚聘新媒体编辑记者、实习编辑等人员 2018-12-12
  • 开奖时刻 5箱可乐免费送出 今日活动持续进行开奖时刻-等级 2018-12-12
  • 阜阳五中成功举办第四届社团文化艺术节文艺汇演 2018-12-12
  • 和谐号动车将开放企业冠名 沪铁路485个车次开始招商 2018-12-11
  • 好战的北约应该负责打扫战场,包括难民安置、战后重建…… 2018-12-10
  • 很容易让人联想到是这个女人的错,而杨杨忽视其背后有很复杂的原因。 2018-12-10
  • 广东金林村:农民爱写诗 2018-12-10
  • 世界最大纸飞机亮相美国 长达19.5米气势十足 2018-12-09
  • 2017年全国“创新社会治理典型案例”征集活动专家评审结果 2018-12-09
  • 关于向社会公开征集广州日报报业集团卫生所西药采购供应商的公告 2018-12-09
  • 594| 32| 923| 296| 193| 268| 168| 589| 557| 663|