jQuery의 테이블 행 및 열 번호

jQuery의 테이블 행 및 열 번호

jQuery를 사용하여 클릭한 테이블 셀의 행과 열 번호를 가져오는 방법, 즉,

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

주어진 컨텍스트에서 Core/index 함수를 사용할 수 있습니다. 예를 들어 상위 TR에서 TD의 인덱스를 확인하여 열 번호를 가져올 수 있고 표에서 TR 인덱스를 확인하여 행 번호를 얻을 수 있습니다.

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

여기서 실행 예제를 확인합니다.

$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});

클릭 시 COLUMN INDEX 가져오기:

$(this).closest("td").index();

클릭할 때 행 인덱스 가져오기:

$(this).closest("tr").index();

한 가지 방법은 모든 이전 요소를 파악하여 세는 것입니다.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});

테이블을 작성할 때 해당 데이터를 셀에 출력할 수 있습니까?

그래서 당신의 테이블은 다음과 같습니다.

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

그러면 간단한 문제일 겁니다.

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

클릭 핸들러를 전체 테이블에 바인딩한 다음 event.target을 사용하여 클릭 TD를 얻는 것이 좋습니다.새벽 1시 20분이라 여기에 덧붙일 수 있는 것은 이것뿐입니다.

언급URL : https://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery