使用jQuery将复杂的html表转换为json

时间:2013-01-14 17:45:22

标签: jquery html json html-table

我需要使用jQuery

获取以下html表的已检查行的JSON

JSON应包含用户在文本框中输入的注释。 任何指针对我都有帮助。

<table id="potable_grid" class="tab">
    <thead>
        <tr>
            <th>
                select PO
            </th>
            <th>
                po id
            </th>
            <th>
                ponumber
            </th>
            <th>
                pocurrency
            </th>
            <th>
                balance
            </th>
            <th>
                thisinvoice
            </th>
            <th>
                thisinvoiceinInvoicecurrency
            </th>
            <th>
                comments
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="chckPO" />
            </td>
            <td>
                po001
            </td>
            <td>
                cuspo1
            </td>
            <td>
                usd
            </td>
            <td>
                10000
            </td>
            <td>
                200
            </td>
            <td>
                2
            </td>
            <td>
                <input type="text" id="txtPO" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chckPO" />
            </td>
            <td>
                po002
            </td>
            <td>
                pocus125
            </td>
            <td>
                inr
            </td>
            <td>
                5000
            </td>
            <td>
                300
            </td>
            <td>
                18000
            </td>
            <td>
                <input type="text" id="txtPO" />
            </td>
        </tr>
    </tbody>
</table>

我已经查过很多帖子了 HTML Table to JSON

但它适用于简单的html表,其中行没有任何控制权。

1 个答案:

答案 0 :(得分:0)

var $checked = $('#potable_grid :checked');

var data = [];

for(var i = 0; i != $checked.length; ++i)
{
  var $row = $($checked[i]).closest('tr');
  var text = $row.find(':text').val();

  data.push(text);
}

// data is now an array of all checked texts.

你的问题很模糊,但这应该让你开始讨论如何迭代已检查的行并获得你想要的值。

顺便说一下,所有文本框的'id'都是无效的。如果您想知道与相关记录相关联的“ID”,请执行po id'之类的操作,例如<input type="text" id="cuspo1" />。然后您的数据(JSON)可以是一个对象,例如

var $input = $row.find(':text');

data.push({ id: $input.attr('id'), value: $input.val() });


// now data contains an array of { id, value };