序列化表行中的输入(jQuery)

时间:2010-10-27 14:03:32

标签: jquery json

我有一个包含多行的表,其中包含表单输入(复选框,文本,下拉列表)。当我单击save时,我希望能够获得代表将在AJAX请求中使用的每个表行的JSON。每行都有一个id,所以我想得到这样的东西:

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

这些数字是表格行的id。

有什么办法吗?

3 个答案:

答案 0 :(得分:22)

这应该做你需要的:

<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>

答案 1 :(得分: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();
  });
});

答案 2 :(得分:0)

您可以使用SerializeFromTable JQuery插件序列化任何带有或不带有表单元素的表。
无需用

标签包装表格。
它很简单(其中data-columnTitle是您想要的ur / json / json数组对象中的关键字段):

let tabledata = $("#example1").serializeFromTable({
                  columnNameBy:"data-columnTitle",
                  dataType:"object" //Default is array
                });

有关更多选项,请查看以下链接:serializeFromTable Plugin

希望这对任何人都有帮助。