Javascript get element by id from a table cell not working - Stack Overflow

admin管理员组

文章数量:1410697

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?

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?

• javascript
• html-table
• getelementbyid

Share Improve this question Follow edited Aug 10, 2017 at 13:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 15, 2013 at 11:08 HoGoHoGo 95144 gold badges1111 silver badges1717 bronze badges 2

• 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 <td>? – Barry Kaye Commented Jan 15, 2013 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 Commented Jan 15, 2013 at 11:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Further to your ment, 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";

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.

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.

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.

本文标签： Javascript get element by id from a table cell not workingStack Overflow