[RESOLVED] Include row # in jQuery generated table

[knelson312]

Sorry if this has been addressed and I missed it, but I need to some help with adding a row to a table created using jQuery. Below is my code for a working table builder in my MVC project. What I need is to add a column to show the row number (index +1) where I've included "row # here". It seems like it should be a simple task but I'm having difficulty finding anything examples for the correct syntax.

That row number will be included in my child table as a line number for the record.

            function DetailsTable() {
                if (dmrDetail.length > 0) {
                    var $table = $('<table/>');
                    $table.append('<thead><tr><th>LIN</th><th>Part ID</th><th>Quantity</th><th>Reason</th></tr></thead>');
                    var $tbody = $('<tbody/>');
                    $.each(dmrDetail, function (i, val) {
                        var $row = $('<tr/>');
                        $row.append($('<td/>').html(row # here));
                        $row.append($('<td/>').html(val.PartNum));
                        $row.append($('<td/>').html(val.Qty));
                        $row.append($('<td/>').html(val.Reason));
                        $tbody.append($row);
                    });
                    $table.append($tbody);
                    $('#dmrDetail').html($table);
                }
            }

[techgnome]

Create a counter... initialize it, then in the loop, increment it and display it...
should be something like this:

                    var $tbody = $('<tbody/>');
                    var rCounter = 0;
                    $.each(dmrDetail, function (i, val) {
                        var $row = $('<tr/>');
                        $row.append($('<td/>').html(++rCounter));
                        $row.append($('<td/>').html(val.PartNum));

-tg

[knelson312]

Worked like a charm! Thanks.

[knelson312]

So apparently I marked this resolved a little prematurely.

The row counter is working great. However, I can't seem to sort out how to link that result to pass it back to my controller. I have all other data passing fine but can't seem to sort out how to reference the ++rCounter column.

[techgnome]

You don't... it would need to be built as a link that would then contain the information ... how ever that presents a problem because the number is just where it is in the grid... it's not truly linked to the data, so it has no meaning or relationship to the data. But the short of it is how you get what ever it is you do need to pass the data depends on how you're activating the controller in the first place.

-tg

[knelson312]

So I'm presently populating the client side table from three text boxes and pushed to the jQuery from an 'add' button. The add button .click function then does some simple validation against the data in textboxes and if isvalid then the code below pushes the data to the function in my OP. Is it possible to move the counter to the add button click event and then just use the data from that in the DetailTable function? The DMRid doesn't actually populate in the DetailsTable but does pass from another textbox in the view. I'm just at a loss how to get the LIN value.

    if (isValidItem) {
                    dmrDetail.push({
                        DMRid: $('#DMRid').val().trim(),
                        LIN: $('#LIN').val(),
                        PartNum: $('#PartNum').val().trim(),
                        Qty: parseInt($('#Qty').val().trim()),
                        Reason: $('#Reason').val().trim()
                    });

                    //Clear Fields
                    $('#PartNum').val('').focus();
                    $('#Qty').val('');
                    $('#Reason').val('');

                }

                //populate PartDetails
                DetailsTable();

[knelson312]

I was able to sort this out using the original proposed solution with a slight modification. I the code in my last post I set the LIN .val to nothing then modified the DetailsTable() as follows. It's now pushing the appropriate value to the controller action.

                    var rCount = 0;
                    $.each(dmrDetail, function (i, val) {
                        val.LIN = ++rCount;
                        var $row = $('<tr/>');
                        $row.append($('<td/>').html(val.LIN));

[szlamany]

Do you know about the .Data() method in jQuery?