如何使用jQuery读取动态HTML表行

Question

    function AddRow() {
    $('#myDynamicTable tr:last').after('<tr><td class="itemName"><input type="text" style="width: 300px;"/><td class="itemQty"><input type="text" style="width: 50px;"/></td></td> </tr>');
    $("#myDynamicTable").show();
    }

在单击按钮时，我正在调用上面的函数，该函数将一行添加到html表中。 该表具有手动填写的itemName和itemQty列。

当我完成添加任意数量的行及其列值后，在另一个按钮上单击，我想读取表中的行值并将其保存到数据库中。

最好还确保一行中的itemName和itemQty都具有值，并且itemQty 必须为数字。

 var arrItems = [];
$('#myDynamicTable').find('tr').each(function () {
    var row = $(this);
    var item = new GatePassItemsViewModel("", "", $.trim(row.find(".itemName").html()), $.trim(row.find(".itemQty").html()));
    arrItems.push(item);
});

我已经尝试了上面的代码，但是$.trim(row.find(".itemName").html())和$.trim(row.find(".itemQty").html())都返回一个空字符串。

arrItems知道我如何成功地将表行读取到我的arrItems变量中？

下表是HTML

 <table id="myDynamicTable" class="displaynone">
                                    <tbody>
                                        <tr>
                                            <th style='width:220px;'><b>Item</b></th>
                                            <th style='width:15px;'><b>Quantity</b></th>
                                        </tr>
                                    </tbody>
                                </table>

Answer 1

我不知道为什么您的.html()调用什么都不返回，但是我可以看到一些您遇到问题的原因。

主要问题是row.find(".itemName").html()将/应该返回表格单元格包含的html，即<input... /> ，而您想要的是该输入元素的值。 因此，在两种情况下都更改为row.find(".itemName input").val() （即，将输入元素作为目标并读取其值），那么您应该处于更好的状态。

为了验证值，您可以简单地执行以下操作：

...
var row = $(this),
  itemText = $.trim(row.find(".itemName input").val()),
  qty= $.trim(row.find(".itemQty input").val());

if(itemText.length === 0 || !qty.match(/\d+/)) {
  //Handle the problem of invalidity
}

这将测试修剪后的item长度是否大于零，并且qty是整数（仅由一个或多个数字组成）。

其他问题/意见：

• 在AddRow()内部，您的表单元格以某种方式嵌套。 您需要先关闭第一个单元格，然后再打开第二个单元格（并删除最后一个double </td> ）
• $.trim(row.find(".searchFirstName").html()); 不会有任何效果，因为它只会返回调整后的值，并且不会更改要调整的变量或类似值。