如何使用jQuery獲取表列索引？

我有足夠的關於jQuery及其用法的知識，但是今天我陷入了使用jQuery獲取中th元素內匹配標籤的列索引的麻煩。我想獲得th元素的索引label文本爲移動。在這種情況下，索引應該是2。我得到了實際的索引，但這不是正確的方法。所以我想知道爲什麼jQuery沒有給我使用index()方法的正確索引。我爲此寫了JS Fiddler。如何使用jQuery獲取表列索引？

的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>

來源

2013-05-16 Furqan Safdar

如果沒有參數被傳遞給所述的.index（）的方法，所述返回值是表示所述第一元素的jQuery對象相對於其兄弟元素中的位置的整數。

這會給你真正的指數 DEMO

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

來源

2013-05-16 07:45:42

「如果沒有參數被傳遞給的.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);

來源

2013-05-16 07:30:44

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

來源

2013-05-16 07:34:43

的指數函數返回根據您提供的列表中的索引。在這種情況下，過濾器的結果。

希望這有助於

來源

2013-05-16 07:35:32

一個簡單的方法來做到這一點是在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/

來源

2015-04-20 18:37:14 CobaltHex

可以使用rowIndex作爲行索引和事件對象來獲取cellIndex。

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

小提琴下面

Fiddle Link

來源

2015-07-30 06:36:00

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

來源

2017-07-11 14:47:06 user3550446

對於一些參考：

$('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); 
});

來源

2018-01-25 08:05:30 WHY

如何使用jQuery獲取表列索引？

回答

相關問題