序列化表格行中的输入（jQuery）答案

【问题标题】：Serialize inputs in table rows (jQuery)序列化表格行中的输入（jQuery）
【发布时间】：2011-05-01 08:25:33
【问题描述】：

我有一个包含表单输入（复选框、文本、下拉菜单）的多行表。当我单击保存时，我希望能够获取表示将在 AJAX 请求中使用的每个表行的 JSON。每行都有一个 id，所以我想找回这样的东西：

[1: { "input_name":"input_value", "input_name":"input_value", etc...}, 2: {etc...}]

这些数字是表格行的 id。

有什么办法吗？

【问题讨论】：

是否有特定原因需要采用这种格式？

标签： jquery json

【解决方案1】：

这应该可以满足您的需要：

<table>
    <tr id="101">
        <td><input type="text" name="f1" value="" /></td>
        <td><input type="checkbox" name="f2" value="v2" /></td>
        <td><input type="checkbox" name="f3" value="" /></td>
        <td><select name="f4">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select></td>
    </tr>
    <tr id="102">
        <td><input type="text" name="f1" value="" /></td>
        <td><input type="checkbox" name="f2" value="v2" /></td>
        <td><input type="checkbox" name="f3" value="" /></td>
        <td><select name="f4">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select></td>
    </tr>
    <tr id="103">
        <td><input type="text" name="f1" value="" /></td>
        <td><input type="checkbox" name="f2" value="v2" /></td>
        <td><input type="checkbox" name="f3" value="" /></td>
        <td><select name="f4">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select></td>
    </tr>

</table>
<button id="btnGo">Go</button>
<script type="text/javascript">
    $('#btnGo').click(function(){
        var data={};
        $('table').find('tr').each(function(){
            var id=$(this).attr('id');
            var row={};
            $(this).find('input,select,textarea').each(function(){
                row[$(this).attr('name')]=$(this).val();
            });
            data[id]=row;
        });
        console.log(data);
    });
</script>

【讨论】：

非常感谢。它也帮助了我。 :)

【解决方案2】：

尚未测试，但这样的东西应该可以工作

var myjson = new Object();
$("#tableid > tr").each(function () {
  var tablerow = $(this);
  $("td input", tablerow).each(function () {
    var input = $(this);
    myjson[tablerow.attr("id")][input.attr("name")] = input.val();
  });
});

【讨论】：