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

【问题标题】：Javascript get element by id from a table cell not workingJavascript从表格单元格中按id获取元素不起作用
【发布时间】：2012-12-29 11:22:25
【问题描述】：

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

但此代码返回错误：

Uncaught TypeError: Object # has no method 'getElementById'

任何想法可能出了什么问题？

【问题讨论】：

row.getElementById('delete_row').className="other_classname"; 似乎没有任何意义 - 你想在这里实现什么？ 'delete_row' 是表格单元格<td> 吗？
嗨，'delete_row' 是每行最后一个单元格内的 href 的 id（所以表格的最后一列用相同 id 的 href 填充）。我会在几秒钟内更正我的问题。

标签： javascript html-table getelementbyid

【解决方案1】：

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

【讨论】：

注意getElementByID 应该是getElementById - 不要大写最后的d。
嗨，我不能使用类名，因为它被表中的其他链接使用。相反，我尝试了这个：links=tbl.getElementsByName('delete_col'); links[i].className="other_classname"; 它返回 Uncaught TypeError: Object # has no method 'getElementsByName'

【解决方案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";

【讨论】：

谢谢，做到了，但我还有另一个错误：Uncaught TypeError: Cannot read property 'rows' of null
这很奇怪。它不起作用，并且由于出现错误，prowser（chrome）会抖动，但是控制台中什么都没有，所以我不知道还有什么问题:(
创建jsFiddle 并在此处提供链接 - 我相信我们可以快速解决此问题。
好的，这里是jsfiddle.net/qr2BJ/7315 整个事情就是在每次删除后在 X href 的 onclick 事件中重新命名 id，所以下次它指的是适当的行。

【解决方案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();
        }
    });

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

【讨论】：

你为什么使用 jQuery？它不在问题范围内。

【解决方案4】：

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

Uncaught TypeError: Object # has no method 'getElementById'

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

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

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

【讨论】：

stackoverflow.com/questions/16475636/…