2

无论如何我可以使用 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？

非常感谢！

如果您的目标是防止选择，您可以使用一些 CSS，例如

body 
{ 
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
4

8 回答 8

13 
var cells = document.getElementById('table').getElementsByTagName('td');

这将包含所有表格单元格。使用数组表示法访问特定的：

cells[4]

这是一个更改背景颜色的快速演示：

http://jsfiddle.net/jackwanders/W7RAu/

于 2012-07-06T16:04:52.567 回答
2

将单元格传回函数：

<td onmouseover="myTD(this)">Cell 1</td>

从对象中获取innerhtml：

function myTD(obj) {
    alert(obj.innerHTML);
}
于 2012-12-02T23:52:52.283 回答
2

不确定你想要什么 - Dom: document.getElementsByTagName("table")[0].rows[2].cells[1]

于 2012-07-06T16:05:41.833 回答
1

仅使用 CSS，您可以执行以下操作：

#table tr:nth-child(2) td:nth-child(2)
{
    background:#ff0000;
}​

jsFiddle 示例

于 2012-07-06T16:05:58.037 回答
1 
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';
            }
        }
    }
}
于 2012-07-06T16:06:01.203 回答
1

这一行：

$('td')

将代码中的所有td元素放入从零开始的数组中，因此以“单元格 5”为内容的单元格将是该数组的第五个元素，即：

$('td')[4]

jQuery 也接受 CSS 样式选择器，所以如果你想定位连续的第二个单元格，你可以使用一个选择器，例如：

$('tr td:nth-child(2)')

阅读我链接的选择器文档，它可以在这种情况下非常方便

于 2012-07-06T16:07:54.883 回答
1

你能澄清什么时候（加载，悬停，......）和哪里（客户端，服务器端......）你想这样做吗？

如果您需要 myTD 中的单元格，只需使用this关键字，它恰好是您的 HTMLTableCell：

function myTD() {
   this.style.color="red"; // just for the example, using CSS classes is much better
}
于 2012-07-06T16:09:04.237 回答
0

我不知道你想做什么，但如果你想做某种“悬停”能力，jquery 可以很简单地做到这一点。我创建了一个示例小提琴http://jsfiddle.net/fd3GK/1/

于 2012-07-06T16:12:31.560 回答