Javascript get element by id from a table cell not working

Question

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?

`row.getElementById('delete_row').className="other_classname";` doesn't seem to make any sense - what are you trying to achieve here? Is `'delete_row'` a table cell ``? — Barry Kaye, Jan 15 '13 at 11:12
Hi 'delete_row' is an id of a href inside last cell of every row (so last column of a tabale is filled in with hrefs of the same id). I will correct my question in a sec. — HoGo, Jan 15 '13 at 11:28

score 0 · Answer 1 · answered Jan 15 '13 at 11:29

0

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.

answered Jan 15 '13 at 11:29

Raghavendra Karunanidhi

69
1
3

Note `getElementByID` should be `getElementById` - do not capitalize the final `d`. – Barry Kaye Jan 15 '13 at 11:35
Hi, I cannot use class name as it is used by other links in table to. Instead I have tried this one: `links=tbl.getElementsByName('delete_col'); links[i].className="other_classname";` and it returns _Uncaught TypeError: Object # has no method 'getElementsByName'_ – HoGo Jan 15 '13 at 11:43

Barry Kaye · Answer 2 · 2013-01-15T11:42:01.207

0

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";

edited Jan 15 '13 at 11:42

answered Jan 15 '13 at 11:34

Barry Kaye

7,682
6
42
64

Thanks, did it but I have enother error: _Uncaught TypeError: Cannot read property 'rows' of null_ – HoGo Jan 15 '13 at 11:39
This is odd. It does not work and the prowser (chrome) shakes as there was an error, but there is nothing in the consloe, so I do not know what else might be wrong :( – HoGo Jan 15 '13 at 11:47
Create a [jsFiddle](http://jsfiddle.net/) and provide the link here - I'm sure we can fix this quickly. – Barry Kaye Jan 15 '13 at 11:49
OK here it is http://jsfiddle.net/qr2BJ/7315/ The whole thing is to renumarate ids in onclick event of X href after each deletion, so next time it refers to the apriopriate row. – HoGo Jan 15 '13 at 13:13

score 0 · Answer 3 · answered Nov 09 '16 at 06:14

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.

why are you using jQuery? Its not in the question. – The Fool Aug 24 '20 at 12:12 — The Fool, Aug 24 '20 at 12:12

score 0 · Answer 4 · answered Aug 24 '20 at 12:23

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.

https://stackoverflow.com/questions/16475636/why-does-getelementbyid-not-work-on-elements-inside-the-document-element/16475657 — The Fool, Aug 24 '20 at 12:28

Javascript get element by id from a table cell not working

4 Answers4