![](/img/trans.png)
[英]How to get innerHTML of td in dynamically populated table in JavaScript
[英]Get <table> element's nth <td> innerHTML dynamically
无论如何我可以使用JavaSCript在<table>中获取指定的第 n 个 <td>的innerHTML吗?
由于我的表是自动生成的,我的<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>
但是如何访问,例如,Cell 5?
非常感谢!
var cells = document.getElementById('table').getElementsByTagName('td');
这将包含您的所有表格单元格。 使用数组表示法访问特定的表示法:
cells[4]
这是一个改变背景颜色的快速演示:
不确定你想要什么 - Dom:document.getElementsByTagName(“table”)[0] .rows [2] .cells [1]
将单元格传递回函数:
<td onmouseover="myTD(this)">Cell 1</td>
从对象获取innerhtml:
function myTD(obj) {
alert(obj.innerHTML);
}
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';
}
}
}
}
这一行:
$('td')
将代码中的所有td
元素放入一个从零开始的数组中,因此以“Cell 5”作为其内容的单元格将是该数组的第五个元素,即:
$('td')[4]
jQuery也接受CSS样式选择器 ,因此如果你想连续定位每隔一个单元格,你可以使用一个选择器,如:
$('tr td:nth-child(2)')
仔细阅读我链接的选择器文档,它可以非常方便地用于这种情况
你能澄清何时(在加载时,在悬停时......)以及在哪里(客户端,服务器端......)你想这样做?
如果您需要myTD中的单元格,只需使用this关键字,它恰好是您的HTMLTableCell:
function myTD() {
this.style.color="red"; // just for the example, using CSS classes is much better
}
我不知道你想要做什么,但如果你想做某种“悬停”能力,jquery可以做到这一点非常简单。 我创建了一个例子小提琴http://jsfiddle.net/fd3GK/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.