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

本文实例讲述了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.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代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

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

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

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

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

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

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

(0)

相关推荐

  • JS实现将二维数组转为json格式字符串操作示例

    本文实例讲述了JS实现将二维数组转为json格式字符串操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>json</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

  • Json字符串与Object、List、Map的互转工具类

    package com.cq2022.zago.base.util; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.io.StringWriter; import java.util.List; import java.util.Map; import org.codehaus.jackson.JsonFactory; import org.codehau

  • json字符串传到前台input的方法

    JSONObject把对象转换成的json字符串,无法直接通过request.setAttribute();传到页面的input标签 如下是错误的: request.setAttribute("pageInfoJsonStr", JSONObject.fromObject(pageInfo).toString()); 还需要 jsonStr.replaceAll("\"", "'")再放到request.setAttribute中 以上

  • 对json字符串与python字符串的不同之处详解

    API的应用通常会处理json数据,刚好今天看到了json字符串和python字符串的区别,放一段代码,区别一下子就看出来,的确json 库为处理Json 数据提供了不少的便利. import json jsonString = '{"arrayOfNums":[{"number":0},{"number":1},{"number":2}],"arrayOfFruits":[{"fruit&quo

  • JSON字符串操作移除空串更改key/value的介绍

    对于JSON字符串的操作.移除键值.添加属性. //删除JSON对象value值 var json=[.....]; delete(json['key']); 或者 delete(json.key); //添加对象object json.object=value; 或者 json['object']=value; 如果数据是查询数据库得到的,那么可能会存在空值,for循环JSON数据挨个移除空值或者操作数据比较繁琐. 这时候可以使用for-in来循环属性 去除空值或者操作数据. function

  • JS对象与json字符串相互转换实现方法示例

    本文实例讲述了JS对象与json字符串相互转换实现方法.分享给大家供大家参考,具体如下: 今天在面试的时候,面试官问到js对象与json字符串的互转问题,由于自己平时在用的时候没有在意,而且在工作中由于用的较少,没有答上来,所以今天特地查查资料复习一下, 巩固一下这方面的知识. 1.js对象转换成json字符串 在与后端进行交互时,有时需要把js对象转换成json字符串格式,这时我们需要去引用一下json2.js这个文件,然后调用JSON.stringify()方法.例如: var data =

  • js将键值对字符串转为json字符串的方法

    要转化的键值对字符 var respDesc="cardid=64157001&cardnum=1&sporder_id=PD12160428120635001&sporder_time=20160526101552": var newstr = respDesc.replace("=",":\""); var stringObj= "{" +newstr.replace("&

  • jackson解析json字符串,首字母大写会自动转为小写的方法

    问题 楼主碰到的问题是,在实体类和表中定义的某个字段为RMBPrice,首字母大写,sql查询出来的列名也是大写的RMBPrice,但是使用jquery的datatables初始化列时,却出错. 那一行的代码如下: {"name": "RMBPrice", "data": "RMBPrice", "className": "text-center", "render"

  • Java遍历json字符串取值的实例

    java遍历json字符串,取得相应KV值时,各种麻烦,比如将json中的list取出来转为JSONArray,再将list中的object转化为map,再取值(之前的做法),仙子啊通过阿里的fastjson,可以很方便的直接将str转化为JSONArray,再将里面的object强转为JSONObject,然后再通过obj.getInteger("key")和obj.getString("key")等取值. JSONArray json = (JSONArray)

  • JavaScript实现的反序列化json字符串操作示例

    本文实例讲述了JavaScript实现的反序列化json字符串操作.分享给大家供大家参考,具体如下: JavaScript中如何反序列化json字符串呢? 有如下两种方法: (1) 使用万能的eval var jsonText = '{"name":"acwong","age":23,"address":{"province":"GuangDong","city":&

随机推荐