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

    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();
    }

On the click of a button, i'm calling the above function that adds a row to an html table. The table has columns itemName and itemQty which are filled in manually.

点击一个按钮,我调用上面的函数,在html表中添加一行。该表具有itemName和itemQty列,这些列是手动填充的。

When i'm done adding any number of rows that i want and their column values, on a another button click, i want to read the values of rows in my table and save them to a database.

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

It would be nice to also ensure that both itemName & itemQty in a row have values and itemQty must be numeric.

最好还要确保连续的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);
});

I have tried the above code but both $.trim(row.find(".itemName").html()) and $.trim(row.find(".itemQty").html()) are returning an empty string.

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

Any one know how i can successfully read my table rows into my arrItems variable?

任何人都知道我如何成功地将我的表行读入我的arrItems变量?

Below is the table html

下面是表格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>

1 个解决方案

#1

I can't tell why your .html() calls return nothing, but I can see a few reasons why you are having problems.

我不知道为什么你的.html()调用什么都没有返回,但我可以看到你遇到问题的几个原因。

Main problem is that row.find(".itemName").html() will/should return the html the table cell contains, i.e. <input... />, while what you want is the value of that input element. So change to row.find(".itemName input").val() (i.e. target the input element and read its value) for both cases and you should be in better shape.

主要问题是row.find(“。itemName”)。html()将/应该返回表格单元格包含的html,即,而你想要的是该输入元素的值。因此,对于这两种情况,更改为row.find(“。itemName input”)。val()(即,定位输入元素并读取其值),您应该处于更好的状态。

For validating the values, you can simply do something like:

要验证值,您可以简单地执行以下操作:

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

This tests that, after trimming, item has a length greater than zero and that qty is an integer (consists exclusively of one or more digits).

这测试在修剪后,item的长度大于零,而qty是一个整数(仅由一个或多个数字组成)。

Other issues/comments:

Inside AddRow(), your table cells are nested somehow. You need to close the first cell before opening the second (and remove the final double </td>)

在AddRow()内部,您的表格单元格以某种方式嵌套。您需要在打开第二个单元格之前关闭第一个单元格(并删除最后的双重 )

The row $.trim(row.find(".searchFirstName").html()); won't have any effect, as it only returns the trimmed value and doesn't change the variable or similar the value of which you are trimming.

行$ .trim(row.find(“。searchFirstName”)。html());将不会产生任何影响,因为它只返回修剪后的值,并且不会更改变量或类似于您正在修剪的值。

#1