jQuery Add row to table with dynamic ids'

Question

function add_row_retail() {
            $(document).ready(function () {
                var table = document.getElementById("Retail");
                var row = table.insertRow(-1);
                var row_id = $('#Retail').val('tr[id]:last');
                console.log(row_id);
                var cell_init = row.insertCell(-1);
                cell_init.innerHTML = "blank";
            });
        }

I am trying to get the id of the table row(<tr>) before the added row, and then add 1 to this, with proper parseint(...). Then doing the same with the cell (<td>) next, so that every cell has a unique id for each table. I can't seem to find the row's id.

HERE IS THE "CORRECT" CODE FOR MY QUESTION

function add_row_retail() {
    var table = document.getElementById("Retail");

    // Row id
    var row_id = $('#Retail tr:last').attr('id');
    var row = table.insertRow(-1);
    var next_row_id = "tr_" + (1+parseInt(row_id.match(/\d+/)[0],10));
    $(row).attr('id', next_row_id);

    for (var i = 0; i < 8; i++) {
        var cell_id = $('#Retail td:last').attr('id');
        console.log(cell_id);
        var next_cell_id = "td_" + (1+parseInt(cell_id.match(/\d+/)[0],10));        console.log(next_cell_id);
        var cell = row.insertCell(-1);
        $(cell).attr('id', next_cell_id);
        $(cell).innerHTML = "blank";
    }
}

Your fiddle doesn't work for a number of reasons. You've included the code "onload" so it is not accessible to the inline click handler. Then when that is fixed, there doesnt' appear to be an element with id Retail in your html. — James Montagne
– James Montagne, Commented Apr 24, 2014 at 20:24

000 · Accepted Answer · 2014-04-24 20:31:34Z

1

Rather than $('#Retail').val('tr[id]:last'); I think you want:

var row_id = $('#Retail tr:last').attr('id')

This selector finds the last tr under the #Retail element, and returns its id attribute.

jQuery last selector: http://api.jquery.com/last-selector/

Next problem: IDs cannot start with numbers. Rename your IDs like "tr_1", "tr_2", etc.

Next problem: To extract the numbers from a string:

"tr_123".match(/\d+/)[0]; // returns 123.

Add 1 to it:

var next_id = "tr_" + (1+parseInt("tr_123".match(/\d+/)[0],10));

Then, set your new id.

var row = table.insertRow(-1);
...
$(row).attr('id', next_id);

edited Apr 24, 2014 at 20:31

answered Apr 24, 2014 at 20:26

000

27.3k10 gold badges74 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

James Montagne Over a year ago

id values can start with numbers in html5.

user3537489 Over a year ago

jsfiddle.net/waH5S/28 that is the latest code, and now I am getting a function not defined. I wasn't getting this before. Searches of StackOverflor yielded this jsfiddle.net/fXfSz/2. I tried to change the function itself to look like link here that users fiddle, but then it gave me .match property of both row_id and cell_id were undefined. I hope this explains it all.

000 Over a year ago

It's a configuration issue. Change the include to "in body" like this dropbox.com/s/n6fjaa56tp9jipg/… -- Also, remove the $( and ) from the second function.

user3537489 Over a year ago

jsfiddle still getting undefined, even with the changes you've said to make. Added a console.log to see row_id, which for some reason is undefined.(No clue why, the HTML has an id)

user3537489 Over a year ago

Nevermind! I found my error! I told it to insert the row, before getting the last <tr> element so the jQuery selector couldn't find an id in the last <tr>.

Collectives™ on Stack Overflow

jQuery Add row to table with dynamic ids'

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related