我怎么能弄清楚细胞是同一行

Question

我有一个包含3列和7行的html表。当我点击一个单元格时，它的bg变为红色。我想确保每行只选择一个单元格。因此，如果我点击已经选择了一个单元格的row1中的单元格，我希望取消选择prev单元格并选择新单元格。我想知道如何判断出细胞是同一行。

Answer 1

如果您使用的是jQuery，请在您的点击处理程序中执行以下操作：

function() {
  $(this).closest('tr').find('td').css('backgroundColor', '');
  $(this).css('backgroundColor', 'red');
}

Answer 2

您可以遍历行，并在嵌入式for循环中遍历单元格。 John Hartsock在此stackoverflow页面上提供的解决方案应该允许您按行和列限定每个单元格。

How do I iterate through table rows and cells in javascript?

Answer 3

给定一个表格单元格，其parentNode将是包含行，而表格行具有cells属性，其中包含所有单元格的集合。所以你可以遍历那个集合。

function selectCell(cell) {
    var siblings = cell.parentNode.cells;
    for (var i = 0; i < siblings.length; i++) {
        if (i != cell.cellIndex) {
            siblings[i].style.backgroundColor = normalBGColor;
        }
    }
    cell.style.backgroundColor = highlightBGColor;
}