How to read dynamic html table rows using jQuery

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

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.

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.

 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.

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

Below is the table 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

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

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

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

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> )
• 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.