jquery - 表格单元格输入返回为未定义

Question

我正在使用jquery 2我需要用表中的值填充多维数组

这是我的代码(第一列被隐藏)

html:

<table  id="datatab"  border="1">
    <tbody>
        <tr role="row" class="odd">
            <td class="sorting_1" style="display: none;">2087971</td>
            <td>1</td>
            <td>1</td>
            <td>aaaa</td>
            <td>John Smith</td>
            <td><input type="text"  name="value1" value="1"></td>
            <td><input type="text"  name="value2" value="2"></td>
            <td><input type="text"  name="value3" value="3"></td>
            <td></td>
         </tr>
        <tr role="row" class="even">
            <td class="sorting_1" style="display: none;">2087972</td>
            <td>2</td>
            <td>2</td>
            <td>bbbb</td>
            <td>Peter Parker</td>
            <td><input type="text"  name="value1" value="4"></td>
            <td><input type="text"  name="value2" value="4"></td>
            <td><input type="text"  name="value3" value="4"></td>
            <td></td>
        </tr>
    </tbody>
</table>
<button id="GetData">Get data</button>

jquery:

<script type="text/javascript">

    $("#GetData").click(function (event) {
        debugger;
        event.preventDefault();
        var TableData = new Array();
        $('#datatab tbody tr').each(function (row, tr) {
            TableData[row] = {
                "id": $(tr).find('td:eq(0)').text()
                , "value1": $(tr).find('td:eq(5)').find("input").value
                , "value2": $(tr).find('td:eq(6)').find("input").value
                , "value3": $(tr).find('td:eq(7)').find("input").value
            }
        });


    });
</script>

我使用以下行成功填充数组中的第一个 id 列

$(tr).find('td:eq(0)').text()

但是输入的值未定义

我做错了什么？

Answer 1

您需要使用 jQuery 对象的 val() 方法，因为它们不像底层 DOMElements 那样具有 value 属性。另请注意，您可以使用 map() 来构建数组。试试这个:

$("#GetData").click(function(e) {
    e.preventDefault();
    var tableData = $('#datatab tbody tr').map(function(row, tr) {
        var $row = $(tr);
        return {
            id: $row.find('td:eq(0)').text(),
            value1: $row.find('td:eq(5) input').val(), 
            value2: $row.find('td:eq(6) input').val(),
            value3: $row.find('td:eq(7) input').val()
        }
    }).get();

    // work with tableData here...
});

Working example