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和＆amp;连续的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变量？

下面是表格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()内，您的表格单元格以某种方式嵌套。您需要在打开第二个单元格之前关闭第一个单元格（并删除最后的双</td>）
行$.trim(row.find(".searchFirstName").html());不会产生任何影响，因为它只返回修剪后的值，并且不会更改变量或类似的修剪值。

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

1 个答案: