2013-05-24 5 views
2

헤더 행, 여러 행의 텍스트 입력 및 전체 행이있는 테이블이 있습니다. 사용자가 입력에 숫자를 입력하면 각 열의 합계가 총 행에 계산됩니다. 이 계산은 입력의 change() 이벤트가 발생하면 실행됩니다.테이블의 첫 번째 행에서 입력 선택

페이지가로드되면 테이블의 첫 번째 행에있는 텍스트 입력에서 change() 이벤트를 트리거 할 수 있기를 바랍니다. 올바른 선택기를 사용하는 데 어려움을 겪고 있습니다. Exampe 테이블 구조의

는 :

<table> 
    <tr class="tblRow headerRow"> 
    <!-- header cells --> 
    </tr> 
    <tr class="altTblRow"> 
    <td class="tableCell"> 
     <input type="text" id="input1-1"> 
    </td> 
    <td class="tableCell"> 
     <input type="text" id="input1-2"> 
    </td> 
    <td class="tableCell"> 
     <input type="text" id="input1-3"> 
    </td> 
    </tr> 
    <tr class="tblRow"> 
    <td class="tableCell"> 
     <input type="text" id="input2-1"> 
    </td> 
    <td class="tableCell"> 
     <input type="text" id="input2-2"> 
    </td> 
    <td class="tableCell"> 
     <input type="text" id="input2-3"> 
    </td> 
    </tr> 
    <tr class="tblRow"> 
    <td class="tableCell"> 
     <input type="text" id="input3-1"> 
    </td> 
    <td class="tableCell"> 
     <input type="text" id="input3-2"> 
    </td> 
    <td class="tableCell"> 
     <input type="text" id="input3-3"> 
    </td> 
    </tr> 
    <tr class="altTblRow totalRow"> 
    <!-- total cells --> 
    </tr> 
</table> 

나는 선택기의 몇 가지를 사용했지만, 내가 무엇을 찾고 얻을 수 없었다.

$('.tblRow:first input').change(); 
$('.tblRow input').first().change(); 
$('.tblRow input').parent('tr').find('input').change(); 

내가 첫 번째 테이블 행에 바로 입력을 위해 사용하거나, 내가 처음 input을 얻고 .parent()를 사용하여 행을 가야 할 수있는 선택이 있습니까?

는 (참고 : 아이디의 코드 샘플에서 변경되었습니다 그렇지 않으면 내가 'input[class*=input1]'를 사용하는 것)

답변

2

내가 좋을 것, 검증되지 않은 비록 :

$('tr:not(".headerRow")').first().find('input').change(); 

JS Fiddle demo합니다. 허용 할

<table> 
    <thead> 
    <tr class="tblRow headerRow"> 
     <!-- header cells --> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr class="altTblRow totalRow"> 
     <!-- total cells --> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr class="altTblRow"> 
     <td class="tableCell"> 
     <input type="text" id="input1-1"> 
     </td> 
     <td class="tableCell"> 
     <input type="text" id="input1-2"> 
     </td> 
     <td class="tableCell"> 
     <input type="text" id="input1-3"> 
     </td> 
    </tr> 
    <!-- other rows --> 
    </tbody> 
</table> 

는 단순히 사용 :

$('tbody tr').first().find('input').change(); 

은 또한,하지만, 나는 (당신의 jQuery를 단순화 어떤) 의미를 활용하기 위해 HTML을 재 작업 좋을 것 JS Fiddle demo.

참고 :

+0

나는 이것을 시도 할 것이다. 좋은 선택 인 것 같습니다. –

0

당신은 마지막을 제외한 모든 행을 선택할 수 있습니다 :

$('tr:not(:last-child) input') 

here

를 참조하거나 당신이 어느 헤더하려면 :

$('tr:not(:last-child):not(:first-child) input') 
+0

이것에 대한 유일한 문제는 테이블에 몇 백 개의 셀 (15 x 25 테이블과 같은 것)이 있기 때문에 한 행의 입력 만 선택하려고하는 것이므로 늪지를 원하지 않는다는 것입니다. 열마다 하나씩 실행하면 계산이 많은 페이지입니다. 그러나'$ ('tr : not (: last-child) : not (: first-child) .first(). find ('input)'을 사용하면 효과가 있습니다. –

2

Insetead을 테이블 행이 동안을하려고 사용하는 (매개 변수) 그리고 그것을 시도하고 무엇을 얻는 지 알기보다는 분명히 알면 나에게 정확한 오류를 보여주지 않으면 무엇을하고 있는가? etting

관련 문제