Question

我有一个HTML表格。在此表中，我在最后一列中有链接（id =“delete_row”）。我试图提取每个链接，它不起作用。我已经看过一些关于它的帖子，并了解到这可能是一个拼写问题，但我检查了所有内容两次仍然无法实现。这是我的代码：

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

然而，此代码会返回错误：

未捕获的TypeError：Object＃＆lt; HTMLTableRowElement＆gt;没有方法'getElementById'

任何想法可能出错？

Answer 1

我认为整个HTML的ID必须是唯一的。您使用ID多次，这可能是问题所在。因此，如果您使用class代替ID而使用getElementsByClassName而不是getElementByID，则可能会解决您的问题。

Answer 2

根据您的评论，要访问每行中的最后一个单元格，请替换：

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

使用：

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

Answer 3

您需要为您的ID使用类结构。假设您将使用按钮添加行，并使用与您类似的X链接删除它们。

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

这是句柄添加和删除过程的javascript代码：

$("#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();
        }
    });

如您所见，动态过程对您更有用。

Answer 4

getElementById方法对于文档根目录是唯一的。没有其他元素具有此方法。因此，您看到错误：

未捕获的TypeError：对象＃没有方法'getElementById'

解决此问题的最简单方法是使用querySelector。

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

也就是说，querySelector在具有许多子级的节点上可能会影响性能。在这种情况下，您可以为元素分配一个唯一的ID，然后实际使用具有恒定查找速度的document.getElementById。对于较小的节点树，最好使用它。

Javascript从表格单元格中获取id无效的元素

4 个答案: