Javascript从表格单元格中按id获取元素不起作用

我有一个 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";
}

但是,此代码返回错误:

未捕获的类型错误:对象 # 没有方法“getElementById”

任何想法可能有什么问题?

stack overflow Javascript get element by id from a table cell not working
原文答案

答案:

作者头像

我认为整个 HTML 的 ID 必须是唯一的。您多次使用 ID,这可能是问题所在。因此,如果您使用 class 而不是 ID 和函数 getElementsByClassName 而不是 getElementByID ,它可能会解决您的情况。

作者头像

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

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";
作者头像

您需要为您的 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();
        }
    });

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

作者头像

getElementById 方法对于文档根是唯一的。没有其他元素有这种方法。因此,您会看到以下错误:

Uncaught TypeError: Object # has no method 'getElementById'

解决这个问题的最简单方法是使用 querySelector

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

也就是说,具有大量子节点的 querySelector 可能会影响性能。如果是这种情况,您可以为元素分配一个唯一的 id 并实际使用具有恒定查找速度的 document.getElementById 。不过,对于较小的节点树,使用它是完全可以的。