2009-10-25 6 views
14

저는 jQuery의 중간 사용자입니다. jQuery를 사용하여 테이블의 rowIndex를 찾았지만 내 시나리오는 다르다. 내 테이블 (GridView)은 20 개의 열과 텍스트 상자, 드롭 다운 목록, 이미지, 레이블과 같은 다양한 컨트롤로 구성된 각 열로 구성됩니다. 모두는 각 행의 서버 측 컨트롤입니다. 데이터베이스의 레코드로 Gridview를 바인딩합니다. 이제 임의의 컨트롤이나 텍스트 상자의 onchange를 클릭하면 변경된 열의 행에 대한 rowIndex를 가져와야합니다. 다음은 사용자 코드입니다.jQuery를 사용하여 테이블 행 인덱스 찾기

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){ 
    alert($(this).closest('td').parent().attr('sectionRowIndex')); 
}); 

하지만 rowIndex를 가져올 수 없습니다. gridview 내부에 html 컨트롤을 사용하면 rowIndex를 가져올 수 있습니다. gridview 내부의 서버 컨트롤을 클릭하면 rowIndex를 찾을 수있는 방법이 있습니까?

답변

44

이 시도 : 변화에 대한

var rowIndex = $(this) 
    .closest('tr') // Get the closest tr parent element 
    .prevAll() // Find all sibling elements in front of it 
    .length; // Get their count 
+0

을하지만 변경된 텍스트 상자의 rowIndex에 얻을 싶어? – superachu

+0

페이지의 HTML을 제공 할 수 있습니까? –

+0

<스팬 ID = "gv1_ctl02_lblID"> 1 <입력 유형 = "텍스트"값 = "마두 라이"ID = "txtLocation"/> 내가 gv1_ctl02_txtName을 클릭하면, 내가의 rowIndex에을받지 않습니다하지만 때 나는 "txtLocation"을 클릭 할 수있다. – superachu

4

이 테이블 셀에서 체크 박스입니다 :

var row = $(this).parent().parent(); 
var rowIndex = $(row[0].rowIndex); 
console.log(rowIndex); 
9

sectionRowIndex<tr> 요소의 속성이 아닌 속성입니다.

샘플 코드를 수정하는 올바른 방법은 다음과 같이 제로 인덱서와 jQuery를 항목에 액세스 할 수 있습니다 :

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){ 
    alert($(this).closest('td').parent()[0].sectionRowIndex); 
}); 

당신을 위해 올바른 행 인덱스를 반환합니다. 또한 jQuery의 .closest() 함수를 사용하여 DOM을 트래버스하고 또한 .parent()을 사용하려는 경우 왜 이들 두 개를 계산하지 않고 가장 가까운 <tr> 요소까지 트래버스해야합니까?

또한 부모 -> 하위 관계가 예상 한 것과 다른 이상한 경우도 처리합니다. 예를 들어, $(this).parent().parent()을 체인으로 연결 한 다음 내부 셀을 다른 div 또는 span으로 랩핑하기로 결정했다면 관계를 망칠 수 있습니다. .closest()은 항상 작동 할 수있는 쉬운 방법입니다.

물론 내 코드 샘플은 위에 제공된 샘플을 다시 사용하고 있습니다. 더 간단한 셀렉터를 먼저 테스트하여 작동하는지 확인한 다음 선택기를 구체화 할 수 있습니다.

1

는 사용할 수 있어야합니다 :

var rowIndex = $(this).parents("tr:first")[0].rowIndex; 
관련 문제