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

【问题标题】：How to get table column index using jQuery?如何使用 jQuery 获取表列索引？
【发布时间】：2013-05-10 23:47:30
【问题描述】：

我对 jQuery 及其用法有足够的了解，但今天我遇到了使用 jQuery 在 table 的 th 元素中获取匹配标签的列索引的麻烦。我想获取具有label 文本作为Mobile 的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>

【问题讨论】：

标签： jquery html indexing html-table

【解决方案1】：

“如果没有参数传递给 .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);

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

希望对你有帮助

【讨论】：

【解决方案4】：

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

这会给你真正的索引 DEMO

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

【讨论】：

【解决方案5】：

一种简单的方法是在 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/

【讨论】：

【解决方案6】：

您可以使用 rowIndex 作为行索引和事件对象来获取 cellIndex。

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

下面的小提琴

Fiddle Link

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

供参考：

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

【讨论】：