Javascript 如何通过索引选择表格单元格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10940714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you select a table cell by its index?
提问by kirgy
I know there is a way of accessing sequential elements, but I'm not sure how to access them by index. Is there a way to do it?
我知道有一种访问顺序元素的方法，但我不确定如何通过索引访问它们。有没有办法做到这一点？
I'm looking for something like:
我正在寻找类似的东西：
document.getElementById('table1').cell[1]
回答by Paul
To access a cell by its row index and cell index within that row you can use:
要通过其行索引和该行中的单元格索引访问单元格，您可以使用：
var rowIndex = 0;
var cellIndex = 1;
document.getElementById('table1').rows[rowIndex].cells[cellIndex];
This will access the second cell (index 1) in your first row (index 0)
这将访问第一行（索引 0）中的第二个单元格（索引 1）
If you want to just use cell index (and not keep track of rows) and have it iterate through the cells in each row, you can do this, but only if every row has the same number of cells. The following code would access the fourth cell in the table (index 3) whether it's in row 0, 1, or 3; as long as each row has the same number of cells:
如果您只想使用单元格索引（而不是跟踪行）并让它遍历每行中的单元格，您可以这样做，但前提是每行具有相同数量的单元格。以下代码将访问表中的第四个单元格（索引 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];
回答by nnnnnn
A table's .rowscollectionprovides access to the rows. A row's .cellscollection provides access to that row's cells. Both use zero-based indexing and have a .lengthproperty. So:
表的.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
回答by u283863
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
回答by MaxArt
To restrict the query by id to the tree of an element you can use querySelector:
要将 id 查询限制为元素树，您可以使用querySelector：
document.getElementById('table1').querySelector('#cell1');
But that's just redundant when you can simply do
但这只是多余的，当你可以简单地做
document.getElementById('cell1');
Edit: to better answer to OP's request, one can access sequentially to the cells of a table in this way:
编辑：为了更好地回答 OP 的请求，可以通过这种方式顺序访问表格的单元格：
document.getElementById('table1').tBodies[i].rows[j].cells[k];
This selects the k-th cell of the j-th row of the i-th body of the table.
If your table has just one <tbody>element (like usual), or you want to access to the cells indipendently from their <tbody>, you can omit the .tBodies[i]part.
这将选择表格第 -th 主体k的j-th 行的-th 单元格i。如果您的表格只有一个<tbody>元素（像往常一样），或者您想从它们的 独立访问单元格<tbody>，则可以省略该.tBodies[i]部分。
回答by tskuzzy
Give the <td>cell an id:
给<td>单元格一个 id：
<td id="mycell">
Then you can access the DOM object by using getElementById():
然后您可以使用以下方法访问 DOM 对象getElementById()：
document.getElementById('mycell');
