javascript - 如何通过索引选择表格单元格？

Question

我知道有一种访问顺序元素的方法，但我不确定如何通过索引访问它们。有没有办法做到这一点？

我正在寻找类似的东西：

document.getElementById('table1').cell[1]

Answer 1

要通过其行索引和该行中的单元格索引访问单元格，您可以使用：

var rowIndex = 0;
var cellIndex = 1;
document.getElementById('table1').rows[rowIndex].cells[cellIndex];

这将访问第一行（索引 0）中的第二个单元格（索引 1）

如果您只想使用单元格索引（而不是跟踪行）并让它遍历每行中的单元格，您可以这样做，但前提是每行具有相同数量的单元格。以下代码将访问表中的第四个单元格（索引 3），无论它位于第 0、1 还是 3 行；只要每行具有相同数量的单元格：

var cellIndex = 3;
var table = document.getElementById('table1');
var num_columns = table.rows[0].cells.length;
var cell = table.rows[Math.floor(cellIndex/num_columns)].cells[cellIndex % num_columns];

Answer 2

表的.rows集合提供对行的访问。行的.cells集合提供对该行单元格的访问。两者都使用从零开始的索引并具有.length属性。所以：

var table = document.getElementById('table1');

alert(table.rows.length);                // number of rows
alert(table.rows[2].cells.length);       // number of cells in row 3

alert(table.rows[2].cells[5].innerHTML); // contents of 6th cell in 3rd row

Answer 3

要通过 id 将查询限制为元素的树，您可以使用querySelector：

document.getElementById('table1').querySelector('#cell1');

但是，当您可以简单地做时，这只是多余的

document.getElementById('cell1');

编辑：为了更好地响应 OP 的请求，可以通过这种方式顺序访问表格的单元格：

document.getElementById('table1').tBodies[i].rows[j].cells[k];

这将选择表的第-th 行的k-th 单元格。如果您的表格只有一个元素（像往常一样），或者您想从它们的 中独立访问单元格，则可以省略该部分。ji<tbody><tbody>.tBodies[i]

Answer 4

document.querySelector('table td'); //Done. IE8 and above supported.
                                    //Only the first one will be selected.

　

document.querySelector('#table1 td'); //First cell in #table1

document.querySelector('#table1 td:nth-child(3)'); //Third cell in #table1
document.querySelectorAll('#table1 td')[2];        //or this

Answer 5

给<td>单元格一个 id：

<td id="mycell">

然后您可以使用以下方法访问 DOM 对象getElementById()：

document.getElementById('mycell');