'Javascript get element by id from a table cell not working

I have a HTML table. In this table I have links in last column (with id="delete_row"). I am trying to extract each link and it is not working. I have seen some posts about it and learned it might be a spelling issue but I checked everything twice and still cannot get it going. Here is my code:

var tbl = document.getElementById('my_table'); 
for (var i = 0 ;i<tbl.rows.length-1; i++) { // for each row
        row = tbl.rows[i];
        row.getElementById('delete_row').className="other_classname";
}

This code however returns error:

Uncaught TypeError: Object #<HTMLTableRowElement> has no method 'getElementById'

Any Idea what might be wrong?

Solution 1:^[1]

I think an ID for entire HTML has to be unique. You are using ID more than one time, which might be the issue. So if you use the class instead of ID and the function getElementsByClassName instead of getElementByID, it might solve your case.

Solution 2:^[2]

Further to your comment, to access the last cell in each row, replace:

row.getElementById('delete_row').className="other_classname";

With:

var len = document.getElementById("my_table").rows[i].cells.length;
document.getElementById("my_table").rows[i].cells[len - 1].className="other_classname";

Solution 3:^[3]

You need to use class structure for your ids. Assume that you will add your rows with a button and delete them with X link like yours.

<input type="button" value="add" id="btnAddRow">

<table id="customFields" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr class="HeaderRow"><td colspan="7"></td></tr>
</table>

And this is the javascript code for handle add and remove process:

$("#btnAddRow").click(function () {
        counter += 1;
        $("#customFields").show();
        $("#customFields").append('<tr valign="top"><td> ' + counter + '</td>' + '<td>' + '<a href="javascript:void(0);" class="removeRow">Delete</a></td></tr>');
    });

    $("#customFields").on('click', '.removeRow', function () {
        var rowId = $(this).parent().parent().index() - 1;
        $(this).parent().parent().remove();

        if ($('#customFields tr').length == 2) {
            $("#customFields").hide();
        }
    });

As you see a dynamic process will be more useful for you.

Solution 4:^[4]

The getElementById method is unique to the document root. No other element has this method. Therefore, you see the error:

Uncaught TypeError: Object # has no method 'getElementById'

The simplest way to solve this would be to use querySelector.

row.querySelector('#delete_row').className="other_classname"

That said, querySelector on nodes with lots of children can have performance implication. If that is the case you could assign a unique id to the element and actually use document.getElementById which has constant lookup speed. For smaller node trees it is perfectly fine to use it though.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Raghavendra Karunanidhi
Solution 2
Solution 3	tdog
Solution 4	The Fool

'Javascript get element by id from a table cell not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]