如何转换/转换HTML表格tbody(使用rowspans)TO json?

时间:2013-07-21 20:49:30

标签: javascript jquery json html-table

我有一个组合行td的HTML表格,或者怎么说,我不知道如何表达自己(我不是很擅长英语),所以我展示了它!这是我的表:

<table border="1">
    <thead>
        <tr>
            <th>line</th>
            <th>value1</th>
            <th>value2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>1.3</td>
            <td>1.4</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
        <tr>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
    </tbody>
</table>

(您可以查看here

我想通过jquery或javascript将此表转换为JSON变量。 应该怎么样,我应该怎么做?谢谢,如果你能帮助我的话!

3 个答案:

答案 0 :(得分:1)

如果您只想转换文字,请使用以下文字:

var array = [];

$('table').find('thead tr').each(function(){
    $(this).children('th').each(function(){
      array.push($(this).text());
    })
}).end().find('tbody tr').each(function(){
    $(this).children('td').each(function(){
      array.push($(this).text());
    }) 
})

var json = JSON.stringify(array);

答案 1 :(得分:1)

以某种方式表示你的表对我没有任何问题,但问题是如何将其解析回HTML!这里是带有前6个标签的JSON:

{"table":{"border":1,"thead":{"th":{"textContent":"line","tr":"textContent":"value1",...}}}}}...

或者为了更好地理解:

{"tag":"table","border":1,"child":{"tag":"thead","child":{"tag":"th","textContent":"line",
   "child":{"tag":"tr","textContent":"value1","child":...}}}}...

包括关闭标签。

有关进一步说明,我需要知道您的表是字符串还是DOM的一部分。

答案 2 :(得分:0)

我相信这就是你想要的:

var jsonTable = {};

// add a new array property named: "columns"
$('table').find('thead tr').each(function() {
    jsonTable.columns = $(this).find('th').text();
};

// now add a new array property which contains your rows: "rows"
$('table').find('tbody tr').each(function() {
    var row = {};

    // add data by colum names derived from "tbody"

    for(var i = 0; i < jsonTable.columnsl.length; i++) {
        row[ col ] = $(this).find('td').eq( i ).text();
    }

    // push it all to the results..

    jsonTable.rows.push( row );
};

alert(JSON.stringify(jsonTable));

我认为应该有一些更正,但我认为这就是它。