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

Question

我对jQuery和它的使用足够的知识，但今天，我坐进进入内部匹配标签的列索引的麻烦th元素table使用jQuery。 我想要得到的指数th有元素label的文本移动 。 在这种情况下，索引应为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

如果没有将参数传递给.index（）方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其兄弟元素的位置。

这将为您提供真正的索引DEMO

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

Answer 2

您可以将rowIndex用于行索引和事件对象以获取cellIndex。

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

小提琴下面

小提琴链接

Answer 3

对于一些参考：

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

Answer 4

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

Answer 5

“如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。”

来源http://api.jquery.com/index/

下面是一个如何使用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 6

Index函数根据您提供的列表返回索引。 在这种情况下，过滤器的结果。

希望这可以帮助

Answer 7

一种简单的方法是在td上使用.prevAll（），然后在其父tr上使用：

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 8

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