Javascript從表格單元格中按id獲取元素不起作用

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

但是，此代碼返回錯誤：

未捕獲的類型錯誤：對象 #<HTMLTableRowElement> 沒有方法“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方法對於文檔根是唯一的。 沒有其他元素有這種方法。 因此，您會看到以下錯誤：

未捕獲的類型錯誤：對象 # 沒有方法“getElementById”

解決這個問題的最簡單方法是使用querySelector 。

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

也就是說，具有大量子節點的querySelector可能會對性能產生影響。 如果是這種情況，您可以為元素分配一個唯一的 id 並實際使用具有恆定查找速度的document.getElementById 。 不過，對於較小的節點樹，使用它是完全可以的。