어떻게 셀들이 같은 열인지 알 수 있습니까?

Question

3 열 및 7rows가있는 html 테이블이 있습니다. 셀을 클릭하면 bg가 빨간색으로 바뀝니다. 각 행의 셀 하나만 선택했는지 확인하고 싶습니다. 따라서 이미 선택된 셀이있는 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?