js and jQuery implementation to obtain data in table and spell it into json string operation example

This article describes the operation of js and jQuery implementations to obtain data in tables and spell them into json strings. Share it for your reference, as follows:

The core code is as follows:

JavaScript code:

function tabToJSON(id) {
    var trs = (id).getElementsByTagName("tr");//Get the tr array    var titles = trs[0].getElementsByTagName("td");  //Get the table header td array    var json = "";
    for(var i = 1; i < ; i++) {
      var tds = trs[i].getElementsByTagName("td");  
      json += "{"; 
      //Assemble json      for(var j = 0; j < ; j++) 
        json += titles[j].innerHTML + ":" + tds[j].innerHTML + ",";
      json = (0,  - 1) + "},";
    }
    json = "[" + (0,  - 1) + "]";
    ("test").innerHTML = json;
}

jQuery code:

function tabToJSONForJquery(id) {
    var titles = $("#" + id).find("tr:first td"); //Get the table header td array //Transfer non-table header, td... assembled 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);
}

Note:For ease of testing, it is recommended that jQuery use cdn directly, such as:

<script src="/jquery/2.0.0/"></script>

Test the HTML part (table table and json data display part):

<table  border="1">
<tr><td>serial number</td><td>age</td><td>unit</td><td>Room number</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 ></div>

useOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunThe test results in json data as:

[{No.:1, Age:25, Unit:1, Room Number:1-2},{No.:2, Age:22, Unit:1, Room Number:1-1},{No.:3, Age:21, Unit:3, Room Number:3-3},{No.:4, Age:20, Unit:2, Room Number:2-2},{No.:5, Age:35, Unit:4, Room Number:4-2}]

Interested friends will test it out by themselves to see how it works

PS: Here are a few related json online tools for your reference:

OnlineJSONCode verification, inspection, beautification and formatting tools:
http://tools./code/json

JSONOnline formatting tools:
http://tools./code/jsonformat

Online XML/JSONConvert each other tools:
http://tools./code/xmljson

jsonCode online formatting/beautification/compression/editing/converting tools:
http://tools./code/jsoncodeformat

OnlinejsonCompression/escaping tools:
http://tools./code/json_yasuo_trans

For more information about JavaScript, please view the special topic of this site: "Summary of json operation skills in JavaScript》、《Complete collection of JavaScript table operation techniques》、《Summary of JavaScript DOM skills》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.