どのようにしてセルが同じ行であるかを知ることができます

Question

私は3列と7rowsを持つhtmlテーブルを持っています。セルをクリックすると、bgが赤に変わります。私は各行から1つのセルだけが選択されていることを確認したい。したがって、すでに選択されているセルがあるrow1からセルをクリックしている場合は、前のセルの選択を解除し、新しいセルを選択します。私はどのようにして細胞が同じ列であるかを知ることができます。

Answer 1

テーブルセルが与えられると、その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; 
} 

Answer 2

あなたはjQueryのを使用している場合は、あなたのクリックハンドラで、次の操作を行います。

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

Answer 3

あなたが行を反復処理し、ループのための組み込みのセルを反復処理することができます。このスタックオーバーフローページのJohn Hartsockが提供するソリューションは、各セルを行と列で修飾する必要があります。

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