JavaScript Get the child id

Question

I'm trying to add new row to table which is look's like this:

    <table class="table table-striped">
        <tbody id="dconTable">
            <th><input type="text" class="span12" id="lbld"></th>
            <th><input type="text" class="span12" id="edizmd"></th>
            <th><input type="text" class="span12" id="idd"></th>
            <th><input type="text" class="span12" id="ad"></th>
            <th><input type="text" class="span12" id="bd"></th>
            <th><input type="text" class="span12" id="en_spard"></th>
            <th><input type="text" class="span12" id="spard"></th>
            <th><input type="text" class="span12" id="en_periodd"></th>
            <th><input type="text" class="span12" id="periodd"></th>
        </tbody> 
    </table>

I using script which I found on the internet. And I want him also write id's in new cells (like id="lbld_1" etc). Here 's the code.

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        colName = table.rows[0].cells[i].parentNode.children[1].getAttribute('id') +"_"+ i;
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        newcell.childNodes[0].value = "";
        newcell.parentNode.children[1].setAttribute('id',colName);
        colName = "";
    }
};

Console says:

Uncaught TypeError: Cannot call method 'setAttribute' of undefined

Show me my mistake, please. Thanks.

Are you passing the tableID as a string? That is, between quotation marks - "" ? — João Paulo Macedo, Aug 13 '12 at 12:43
You should give `ID`s/`class`es to make your code more effective and readable. The error is quite clear, `newcell.parentNode.children[1]` returns `undefined` instead of a DOM element. — Fabrício Matté, Aug 13 '12 at 12:45
@JOPLOmacedo Thanks for the link though, I've never used it with native DOM elements. — Fabrício Matté, Aug 13 '12 at 12:46
@FabrícioMatté No problem. I deleted my comment since you deleted yours too. I assumed you went looking for it and found it on your own ;) — João Paulo Macedo, Aug 13 '12 at 13:02
Exactly, found a [question](http://stackoverflow.com/q/7935689/1331430) regarding the difference between `.children` and `.childNodes` as well, so far I either used `.childNotes` filtering by `nodeType` or jQuery's `.children()`, good to know there's more native DOM element methods than I'm aware of. `=]` — Fabrício Matté, Aug 13 '12 at 13:06

score 2 · Accepted Answer · answered Aug 13 '12 at 12:55

Your code doesn't make any sense to me:

table.rows[0].cells[i].parentNode.children[1];
//===
table.rows[0].cells[1];

cells are children of rows, so get the parentNode of a row, and it'll return a row, get one of its children and you're back at the level of the cells (if you're lucky! - some browsers will include whitespace, or comments in the nodelist).
Besides, if you need an id, just anElem.id will do, getAttribute() is a bit much.

So this would be what you're trying to do:

colName = table.rows[0].cells[i].id;
newcell.id = colName;

But that's creating multiple elements with the same ID, which is impossible. In real life, if someone else had my ID, I'd have a problem. Same logic applies to ID's in the DOM: they are unique! So try:

colName = table.rows[0].cells[i].id.split('_')[0];
newcell.id = colName+'_'+i;

Lastly, you don't seem to be appending your elements, so add table.rows[0].appendChild(newCell);, too

Sorry. I replaced parentNode.children[1] to childNodes[0] in both lines and it work now. I'll try your code tomorrow. Thanks. — Timofey Trofimov, Aug 13 '12 at 13:00
you're welcome, one more thing, though: add a `var` before `colName = table.rows[0]...`, to avoid creating globals all over the place — Elias Van Ootegem, Aug 13 '12 at 13:02
Nice explanation, should also add that `getAttribute()`/`setAttribute()` is unnecessary for this as JS works with DOM properties naturally, no point in using html attributes when what you want is the DOM property. — Fabrício Matté, Aug 13 '12 at 13:09

JavaScript Get the child id

1 Answers1