jQuery : 표 머리글 만 기반으로 테이블 열의 값을 선택하는 방법

Question

헤더 ID가있는 테이블이 있습니다. 이 헤더 아래의 모든 필드를 선택해야합니다. 소스 코드에 액세스 할 수 없으며이 테이블에 클래스가 사용되지 않습니다. 이 작업을 수행하는 방법에 대한 아이디어가 있으십니까?

Answer 1

: eq (색인) 필터를 사용해야합니다.

선택하려는 열의 인덱스를 결정 한 후, 당신이 할 수있는 (의이 idx를 호출하자) :

$('#yourTableID tr').each(function(){ 
    // for each row: 
    var myField = $(this).children('td:eq('+idx+')'); 
    // do stuff with the selected field 
}); 

Answer 2

가 첫 번째 열 얻으려면 :

$(function() { 
    var col = $("td:nth-child(1)"); 
}); 

Answer 3

가장 간단한을 것입니다 행의 헤더 위치 (색인)를 가져온 다음 같은 열 인덱스에있는 모든 셀의 값에 액세스하십시오. 이 예제를 기반으로

$('#table th').click(function() { 
    var th = $(this); 
    var index = $('th', th.parents('tr')).index(th); 
    var column = $('tbody td:nth-child(' + (index + 1) + ')', th.parents('table')); 
    var values = column.map(function() { 
     return $(this).text(); 
    }); 
    alert($.makeArray(values)); 
}); 

:

는

<table id="table"> 
    <thead> 
     <tr><th>head1</th><th>head2</th><th>head3</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>cell1a</td><td>cell2a</td><td>cell3a</td></tr> 
     <tr><td>cell1b</td><td>cell2b</td><td>cell3b</td></tr> 
     <tr><td>cell1c</td><td>cell2c</td><td>cell3c</td></tr> 
    </tbody> 
</table>