jQuery를 사용하여 테이블 열 인덱스를 얻는 방법?

Question

jQuery와 그 사용법에 대한 충분한 지식을 가지고 있지만, 오늘은 th 요소의 내부에서 일치하는 열 인덱스를 얻는 데 어려움을 겪었습니다. table은 jQuery를 사용합니다. 나는 텍스트를 가진 th 요소의 인덱스를 모바일으로하고 싶습니다. 이 경우 색인은 2 여야합니다. 나는 실제 색인을 얻고 있지만 이것이 올바른 방법이 아닙니다. 그래서 jQuery가 index() 메서드를 사용하여 올바른 인덱스를 제공하지 않는 이유를 알고 싶습니다.

나는 이것을 위해 JS Fiddler도 적어 두었습니다.

jQuery를

var elem = $('#tbl th'); 
var rIndex; 
alert('Length : ' + elem.length); 
var index = elem.filter(
    function(index){ 
     var labelText = $(this).find('label').text();   
     //alert(index + ' - ' + labelText); 
     var result = labelText == 'Mobile'; 
     if (result) 
      rIndex = index; 
     return result; 
    }).index(); 
alert("jQuery Index : " + index); 
alert("Actual Index : " + rIndex); 

HTML

<table id="tbl"> 
    <tr> 
     <td></td> 
     <th><label>Application No.</label></th> 
     <td></td> 
     <th><label>Name</label></th> 
     <td></td> 
     <th><label>Mobile</label></th> 
     <td></td> 
     <th><label>Gender</label></th> 
    </tr> 
</table> 

Answer 1

도움 반환 값은 그 형제 요소 jQuery 오브젝트 대하여 내의 첫 번째 요소의 위치를 ​​나타내는 정수이다.

이 당신에게 실제 인덱스 DEMO

elem.each(function(){ 
    if($(this).find('label').text()=='Mobile') { 
     alert(elem.index(this)); 
    } 
}); 

Answer 2

"어떤 인자가있는 .index() 메소드에 전달되지 않은 경우, 반환 값은 최초의 위치를 ​​나타내는 정수이고 jQuery 객체 내의 해당 형제 요소를 기준으로 한 요소입니다. "

소스 아래 http://api.jquery.com/index/

당신이 찾고있는 결과를 달성하기 위해 인덱스를()를 사용하는 방법의 예입니다. 색인을 원하는 열의 ID를 추가하여 예제를보다 간단하게 만들고 어쨌든 원하는대로 선택할 수 있습니다.

<table id="tbl"> 
    <tr> 
     <td></td> 
     <th><label>Application No.</label></th> 
     <td></td> 
     <th><label>Name</label></th> 
     <td></td> 
     <th id="mobile"><label>Mobile</label></th> 
     <td></td> 
     <th><label>Gender</label></th> 
    </tr> 
</table> 

var elem = $('#tbl th'); 
var rIndex; 
alert('Length : ' + elem.length); 
var index = elem.filter(
    function(index){ 
     var labelText = $(this).find('label').text();   
     //alert(index + ' - ' + labelText); 
     var result = labelText == 'Mobile'; 
     if (result) 
      rIndex = index; 
     return result; 
    }).index(); 
alert("jQuery Index : " + index); 
alert("Actual Index : " + rIndex); 


correctIndex = $('th').index($('#mobile')) 

alert("Used correctly :" + correctIndex); 

Answer 3

$('#tbl').find('th').each(function($index){ 
    if($(this).children('label').html() == 'Mobile') 
     alert($index); 
}) 

Answer 4

인덱스 기능은 사용자가 제공 한 목록에 따라 인덱스를 반환합니다. 이 경우 필터의 결과입니다. 어떤 인자가있는 .index() 메소드에 전달되지 않으면

희망이

Answer 5

는 TD에 다음 부모 TR에 .prevAll()를 사용하다 할 수있는 쉬운 방법 중 하나 줄 것이다 :

var row = $td.closest('tr').prevAll().length; 
var col = $td.prevAll().length; 

을 ($td being the td elem you are checking)

데모 : http://jsfiddle.net/g5s0ex20/2/

Answer 6

행 인덱스 및 이벤트 객체에 rowIndex를 사용하여 cellIndex를 가져올 수 있습니다.

$('input').blur(function() { 
    var total_qty = 0; 
    var $td = $(this).closest('td'); 
    var col = $td.parent().children("td").index($td); 
    $('table tbody tr').each(function() { 
     var $td = $(this).find('td:eq('+col+')'); 
     var qty = $td.find('input').val(); 
     if(qty != '') total_qty += qty; 
    }); 
    console.log(total_qty); 
}); 

:

this.rowIndex //for row index 
e.toElement.cellIndex //for column index 

바이올린 어떤 타이밍에서

Fiddle Link

Answer 7

$('table th').each(function(i){ 
    if($($(this).find('label')).html() == "Name"{ 
     console.log("position= " + i); return false; 
    } 
}); 

Answer 8

아래