Question

我有这张桌子

<table>
  <tr>
      <th>name</th>
      <th>address</th>
      <th>city</th>
  </tr>
  <tr>
      <td data-attr="name">amy</td>
      <td data-attr="address">123 El St.</td>
      <td data-attr="city">Rossberg</td>
  </tr>

  <tr>
      <td data-attr="name">john</td>
      <td data-attr="address">232 Rosary Rd.</td>
      <td data-attr="city">Newberg</td>
  </tr>

我无法找到填充json对象的正确方法，如下所示：

[{
  "name" : "amy",
  "address" : "123 El St.",
  "city" : "Rossberg"
 },
 {
  "name" : "john",
  "address" : "232 Rosary Rd.",
  "city" : "Newberg"
 }
]

使用jquery v1.8.3执行此操作的正确方法是什么？

P.S。我将能够查看答案＆amp;接受明天用作解决方案的内容。谢谢

Answer 1

解决方案是创建一个数组，迭代表的每一行，创建一个对象，并遍历每个单元格，将数据属性和文本存储到创建的对象中，最终将该对象推送到数组中。

var mainArray = [];

$('table tr').each(function () {
    var $tds = $(this).find("td");
    var len = $tds.length;
    if (len) {
        var tempObj = {};
        for (var i = 0; i < len; i++) {
            var $td = $tds.eq(i);
            temp[$td.data("attr")] = $td.text();
        }
        mainArray.push(temp);
        tempObj = {};
    }
});

alert(JSON.stringify(mainArray));

JSFiddle

Answer 2

以下是一个例子：

＆＃13;

$(document).ready(function(){

    var data = [];
    var table = $('table'); // probably better if you use an id
    
    table.find('tr').each(function(i){
        if (i != 0) { // ignore header
            
            var $tds = $(this).find('td'),
            name = $tds.eq(0).text(),
            address = $tds.eq(1).text(),
            city = $tds.eq(2).text();
            
            data.push({ "name":name, "address":address, "city":city });
        }
    });
    
    var jsonPeople = JSON.stringify(data);
    alert(jsonPeople);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
      <th>name</th>
      <th>address</th>
      <th>city</th>
  </tr>
  <tr>
      <td data-attr="name">amy</td>
      <td data-attr="address">123 El St.</td>
      <td data-attr="city">Rossberg</td>
  </tr>

  <tr>
      <td data-attr="name">john</td>
      <td data-attr="address">232 Rosary Rd.</td>
      <td data-attr="city">Newberg</td>
  </tr>

＆＃13;

Answer 3

你去吧

var counter = 1;
var mainArray = [];
var subArray = new Object();

$('.toJson').each(function(){
    var col = $(this);
     subArray[col.data('attr')] = col.html();

    if(counter == 3)
    {
        mainArray.push(subArray);
        subArray = new Object();
        counter = 0;
    }
    counter++;
});

alert(JSON.stringify(mainArray));

<强> EXAMPLE

Answer 4

有一个jQuery插件可以将HTML表序列化为javascript对象。

https://github.com/lightswitch05/table-to-json

您所要做的就是使用jQuery选择表并调用插件：

var table = $（'＃table-id'）。tableToJSON（）;

从表中填充json对象

4 个答案: