javascript Javascript从表格单元格中按id获取元素不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14336419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript get element by id from a table cell not working
提问by HoGo
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:
我有一个 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";
}
This code however returns error:
但是，此代码返回错误：
Uncaught TypeError: Object #<HTMLTableRowElement> has no method 'getElementById'
未捕获的类型错误：对象 #<HTMLTableRowElement> 没有方法“getElementById”
Any Idea what might be wrong?
任何想法可能有什么问题？
回答by Raghavendra Karunanidhi
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 classinstead of IDand the function getElementsByClassNameinstead of getElementByID, it might solve your case.
我认为整个 HTML 的 ID 必须是唯一的。您多次使用 ID，这可能是问题所在。因此，如果您使用class而不是ID和函数getElementsByClassName而不是getElementByID，它可能会解决您的情况。
回答by Barry Kaye
Further to your comment, 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";
回答by tdog
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.
您需要为您的 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>
And this is the javascript code for handle add and remove process:
这是处理添加和删除过程的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();
}
});
As you see a dynamic process will be more useful for you.
如您所见，动态流程对您更有用。
