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

我对jQuery及其用法有足够的了解，但今天我遇到了一个难题，就是使用jQuery在

table

的

th

元素中获取匹配标签的列索引。我想得到

th

元素的索引，该元素的

标签
文本为Mobile。在这种情况下，索引应为2。我得到了实际的索引，但这不是正确的方法。所以我想知道为什么jQuery没有使用
index（）
方法为我提供正确的索引

我也为此写了一篇文章

jQuery

var elem=$（'tbl th'）；
var-rIndex；
警报（“长度：”+元素长度）；
var指数=元素过滤器(
功能（索引）{
var labelText=$（this.find（'label'）.text（）；
//警报（索引+'-'+labelText）；
var结果=labelText==“移动”；
如果（结果）
rIndex=指数；
返回结果；
}).index（）；
警报（“jQuery索引：”+索引）；
警报（“实际索引：+rIndex”）；

HTML


申请编号。
名称
可移动的
性别
“如果没有参数传递给.index（）方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置。”

来源

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


申请编号。
名称
可移动的
性别
变量元素=$（'tbl th'）；
var-rIndex；
警报（“长度：”+元素长度）；
var指数=元素过滤器(
功能（索引）{
var labelText=$（this.find（'label'）.text（）；
//警报（索引+'-'+labelText）；
var结果=labelText==“移动”；
如果（结果）
rIndex=指数；
返回结果；
}).index（）；
警报（“jQuery索引：”+索引）；
警报（“实际索引：+rIndex”）；
correctIndex=$（'th'）。索引（$（'mobile'））
警报（“正确使用：+correctIndex”）；
Index函数根据您提供的列表返回索引。在这种情况下，将显示过滤器的结果

希望这有帮助
如果没有参数传递给.index（）方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置

这将给你真正的索引

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

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

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

（
$td是您正在检查的td元素
）

演示：
您可以对行索引和事件对象使用rowIndex来获取cellIndex

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

在下面拉小提琴

对于某些参考：

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

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

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