javascript jQuery：垂直获取下一个表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8840024/
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
jQuery: Get next table cell vertically
提问by Devin Burke
How can I use jQuery to access the cell (td) immediately belowa given cell in a traditional grid-layout html table(i.e., one in which all cells span exactly one row and column)?
我如何使用 jQuery 访问传统网格布局 html （即，所有单元格恰好跨越一行和一列）中给定单元td格正下方的单元格table( )？
I know that the following will set nextCellto the cell to the immediate right of the clicked cell because they are immediate siblings, but I am trying to retrieve the cell immediately below the clicked cell:
我知道以下内容将设置nextCell为单击单元格右侧的单元格，因为它们是直接兄弟，但我试图检索单击单元格正下方的单元格：
$('td').click(function () {
var nextCell = $(this).next('td');
});
Preferably I would like to do it without any use of classes or ids.
最好我想在不使用任何类或 ID 的情况下做到这一点。
回答by Kevin B
Try this:
试试这个：
$("td").click(function(){
// cache $(this);
var $this = $(this);
// First, get the index of the td.
var cellIndex = $this.index();
// next, get the cell in the next row that has
// the same index.
$this.closest('tr').next().children().eq(cellIndex).doSomething();
});
回答by mbillard
$('td').click(function () {
var index = $(this).prevAll().length
var cellBelow = $(this).parent().next('tr').children('td:nth-child(' + (index + 1) + ')')
});
indexis the 0-based index of the cell in the current row (prevAllfinds all the cells before this one).
index是当前行中单元格的从 0 开始的索引（prevAll查找此行之前的所有单元格）。
Then in the next row, we find the nth-childtd at index + 1 (nth-childstarts at 1, hence the + 1).
然后在下一行，我们找到nth-child索引 + 1 处的td（nth-child从 1 开始，因此是+ 1）。
回答by Mark Rhodes
If you want to do it without using selectors, you can do:
如果你想在不使用选择器的情况下做到这一点，你可以这样做：
function getNextCellVertically(htmlCell){
//find position of this cell..
var $row = $(htmlCell).parent();
var cellIndex = $.inArray(htmlCell, $row[0].cells);
var table = $row.parent()[0];
var rowIndex = $.inArray($row[0], table.rows);
//get the next cell vertically..
return (rowIndex < table.rows.length-1) ?
table.rows[rowIndex+1].cells[cellIndex] : undefined;
}
$('td').click(function () {
var nextCell = getNextCellVertically(htmlCell);
//...
});
Not that efficiency is important here but it works out much faster to do it like this - in tests over 100,000 iterations it was 2-5 times faster than the selector based approaches.
效率在这里并不重要，但这样做的速度要快得多 - 在超过 100,000 次迭代的测试中，它比基于选择器的方法快 2-5 倍。
回答by Adaz
How about:
怎么样：
$('td').click(function () {
var nextCell = $(this).parent().next().find("td:nth-child(whatever)");
});
回答by dyelawn
Are there an equal number of cells in each table row? If so, you could get the "count" of the cell in question, then select the corresponding cell in the next('tr').
每个表格行中的单元格数量是否相同？如果是这样，您可以获得相关单元格的“计数”，然后在next('tr').
