javascript 动态获取 <table> 元素的第 n 个 <td> innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11365765/
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
Get <table> element's nth <td> innerHTML dynamically
提问by sissypants
Is there anyway I can get the innerHTML of the designated nth<td> in a <table> using JavaSCript?
无论如何，我可以使用 JavaSCRipt 在 <table> 中获取指定第n个<td>的 innerHTML吗？
Since my table is automatically generated, my <td>'s do not have IDs. I am using the following HTML code:
由于我的表是自动生成的，我的 <td> 没有 ID。我正在使用以下 HTML 代码：
<table id="table">
<tr>
<td onmouseover="myTD()">Cell 1</td>
<td onmouseover="myTD()">Cell 2</td>
<td onmouseover="myTD()">Cell 3</td
</tr>
<tr>
<td onmouseover="myTD()">Cell 4</td>
<td onmouseover="myTD()">Cell 5</td>
<td onmouseover="myTD()">Cell 6</td>
</tr>
</table>
But how do access, for instance, Cell 5?
但是如何访问，例如，Cell 5？
Thanks a lot!
非常感谢！
采纳答案by Julien Ch.
Can you clarify when (on load, on hovering, ...) and where (client side, server side ...) you want to do that?
你能说明你什么时候（加载时、悬停时......）和哪里（客户端、服务器端......）你想这样做吗？
If you need the cell inside myTD, just use the thiskeyword, which happens to be your HTMLTableCell:
如果您需要 myTD 中的单元格，只需使用this关键字，它恰好是您的 HTMLTableCell：
function myTD() {
this.style.color="red"; // just for the example, using CSS classes is much better
}
回答by Hymanwanders
var cells = document.getElementById('table').getElementsByTagName('td');
This will contain all your table cells. Use array notation to access a specific one:
这将包含您所有的表格单元格。使用数组表示法来访问一个特定的：
cells[4]
Here's a quick demo which changes the background color:
这是一个更改背景颜色的快速演示：
回答by mplungjan
Not sure what you want - Dom: document.getElementsByTagName("table")[0].rows[2].cells[1]
不确定你想要什么 - Dom: document.getElementsByTagName("table")[0].rows[2].cells[1]
回答by Gary M Hudman
Pass the cell back to the function:
将单元格传递回函数：
<td onmouseover="myTD(this)">Cell 1</td>
<td onmouseover="myTD(this)">Cell 1</td>
Get the innerhtml from the object:
从对象中获取innerhtml：
function myTD(obj) {
alert(obj.innerHTML);
}
回答by j08691
Using just CSS you could do:
仅使用 CSS，您可以执行以下操作：
#table tr:nth-child(2) td:nth-child(2)
{
background:#ff0000;
}?
回答by machineghost
function addClassToNthTD(n) {
var table = document.getElementById('table');
for (var i = 0; i < table.childNodes.length; i++;) {
var rows = table.childNodes[i];
for (var j = 0; j < tr.childNodes.length; j++;) {
n = n - 1;
if (n == 0) {
tr.childNodes[j].className = 'foo';
}
}
}
}
回答by hellsgate
This line:
这一行：
$('td')
Places all of the tdelements in the code into a zero-based array, so the cell with 'Cell 5' as its content would be the fifth element of that array, ie:
td将代码中的所有元素放入一个从零开始的数组中，因此内容为 'Cell 5' 的单元格将是该数组的第五个元素，即：
$('td')[4]
jQuery also accepts CSS style selectors, so if you wanted to target the every second cell in a row, you could use a selector such as:
jQuery 也接受 CSS 样式选择器，所以如果你想定位一行中的每隔一个单元格，你可以使用一个选择器，例如：
$('tr td:nth-child(2)')
Read through the selector documentation I've linked, it can come in very handy for situations like this
通读我链接的选择器文档，它可以在这种情况下非常方便
回答by Dappergoat
I have no idea what you are trying to do, but if you want to do some kind of "hover" ability, jquery can do that quite simple. i have created an example Fiddle http://jsfiddle.net/fd3GK/1/
我不知道你想做什么，但如果你想做某种“悬停”能力，jquery 可以很简单地做到这一点。我创建了一个示例小提琴http://jsfiddle.net/fd3GK/1/
