logo标签列表

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

jqueryhtmlindexinghtml-table
8

我对jQuery及其使用有足够的了解，但今天我遇到了一个麻烦——使用jQuery在table的th元素中获取匹配标签的列索引。我想要获取具有Mobile文本标签的th元素的索引。 在这种情况下，索引应为2。 尽管我可以获得实际索引，但这并不是正确的方法。 所以我想知道为什么使用index()方法时，jQuery没有给出正确的索引。

我还为此编写了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>
8个回答
12

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

这将为您提供真实的索引 演示

elem.each(function(){
    if( $(this).find('label').text()=='Mobile') {
        alert(elem.index(this));
    }
});
6
您可以使用rowIndex来获取行索引，使用事件对象来获取单元格索引。
this.rowIndex //for row index
e.toElement.cellIndex //for column index

以下是代码示例

点此查看完整代码

2

部分参考:

$('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);
});
1
$('#tbl').find('th').each(function($index){
    if($(this).children('label').html() == 'Mobile')
        alert($index);
})
0
$('table th').each(function(i){
    if($($(this).find('label')).html() == "Name"{
       console.log("position= " + i); return false;
    }
});
0

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

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

希望这可以帮助到您。

0

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

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

($td是您要检查的td元素)

demo: http://jsfiddle.net/g5s0ex20/2/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接