动态获取<table>元素的第 n 个 <td> innerHTML

Get <table> element's nth <td> innerHTML dynamically

本文关键字：td innerHTML table 动态 元素 获取      更新时间：2023-09-26
无论如何，

我可以使用JavaSCript在<>表中获取指定第n个

的内部HTML吗？

由于我的表是自动生成的，因此我的

没有 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>

但是，例如，如何访问单元格 5？

多谢！

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

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

cells[4]

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

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

不确定你想要什么 - Dom： document.getElementsByTagName（"table"）[0].rows[2].cells[1]

将单元格传递回函数：

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

从对象中获取内部html：

function myTD(obj) {
    alert(obj.innerHTML);
}

您能否澄清何时（加载时，悬停时，...）以及要在哪里（客户端，服务器端...）执行此操作？

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

function myTD() {
   this.style.color="red"; // just for the example, using CSS classes is much better
}

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

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

js小提琴示例

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)')

通读我链接的选择器文档，对于这种情况，它可以非常方便

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

相关文章：