得到 <table> 元素的第n個 <td> innerHTML動態

Question

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

非常感謝！

Answer 1

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

這將包含您的所有表格單元格。 使用數組表示法訪問特定的表示法：

cells[4]

這是一個改變背景顏色的快速演示：

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

Answer 2

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

Answer 3

將單元格傳遞回函數：

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

從對象獲取innerhtml：

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

Answer 4

使用CSS你可以做：

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

jsFiddle例子

Answer 5

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';
            }
        }
    }
}

Answer 6

這一行：

$('td')

將代碼中的所有td元素放入一個從零開始的數組中，因此以“Cell 5”作為其內容的單元格將是該數組的第五個元素，即：

$('td')[4]

jQuery也接受CSS樣式選擇器 ，因此如果你想連續定位每隔一個單元格，你可以使用一個選擇器，如：

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

仔細閱讀我鏈接的選擇器文檔，它可以非常方便地用於這種情況

Answer 7

你能澄清何時（在加載時，在懸停時......）以及在哪里（客戶端，服務器端......）你想這樣做？

如果您需要myTD中的單元格，只需使用this關鍵字，它恰好是您的HTMLTableCell：

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

Answer 8

我不知道你想要做什么，但如果你想做某種“懸停”能力，jquery可以做到這一點非常簡單。 我創建了一個例子小提琴http://jsfiddle.net/fd3GK/1/