数码控科技猎奇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
  • 党的革命精神具有内在一致性 2019-02-17
  • 分开来吃相当于延长节日气氛对身体也有好处。 2019-02-17
  • 2017中国网络文化产业年会 2019-02-16
  • 女子5万卖掉1岁多女儿 当天就花6000元买化妆品等 2019-02-16
  • 重点区域强化督查启动 2019-02-16
  • 在粪坑里优胜的是蛆虫,在不公正的社会里优胜的是蛀虫。 2019-02-15
  • 河北省124名残疾考生获204项合理便利 2019-02-15
  • 女子车上突然发病 公交车长现场急救 2019-02-15
  • 榆林发布诚信“红黑榜” 拒服兵役者进入“黑名单” 2019-02-15
  • 贵溪市河潭镇第七届人代会第三次会议胜利召开 2019-02-14
  • 众演员热血塑造 张鲁一佟丽娅演绎抗战传奇 2019-02-14
  • 杨世芬:真情继母书写人间大爱 2019-02-14
  • 2016世界旅游城市联合会重庆香山旅游峰会 2019-02-13
  • 如何造一个高情商机器人?回答用户要有趣又暗藏玄机 2019-02-13
  • 以朝鲜民主主义人民共和国为例,难道特金会是由朝鲜工人、农民主导的?[哈哈] 2019-02-13
  • 862| 759| 97| 393| 373| 351| 754| 133| 473| 988|