How to get table column index using jQuery?

Question

I have adequate knowledge about jQuery and its usage but today i got into a trouble of getting the column index of matching label inside th element of table using jQuery. I want to get the index of th element having label text as Mobile. The index should be 2 in this case. I am getting the actual index but this is not the correct way of doing it. So i want to know why jQuery is not giving me the right index using index() method.

I have also written the JS Fiddler for this.

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>

rahul maindargi · Accepted Answer · 2013-05-16 07:45:42Z

12

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

This will give you real index DEMO

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

answered May 16, 2013 at 7:45

rahul maindargi

5,7052 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj Mohandas · Accepted Answer · 2015-07-30 06:36:00Z

6

You can use rowIndex for row index and event object to get the cellIndex.

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

Fiddle below

Fiddle Link

answered Jul 30, 2015 at 6:36

Manoj Mohandas

1411 gold badge2 silver badges10 bronze badges

Comments

WHY · Accepted Answer · 2018-01-25 08:05:30Z

2

For Some Ref:

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

answered Jan 25, 2018 at 8:05

WHY

2782 silver badges10 bronze badges

Comments

Ahmed Abumostafa · Accepted Answer · 2013-05-16 07:34:43Z

1

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

answered May 16, 2013 at 7:34

Ahmed Abumostafa

2261 silver badge8 bronze badges

Comments

Raimond Kuipers · Accepted Answer · 2013-05-16 07:35:32Z

0

The Index function returns the index based upon the list you provide. In this case the outcome of the filter.

Hope this helps

answered May 16, 2013 at 7:35

Raimond Kuipers

1,1461 gold badge10 silver badges20 bronze badges

Comments

Sam Shiles · Accepted Answer · 2013-05-16 07:36:13Z

"If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements."

source http://api.jquery.com/index/

Below is an example of how to use index() to achieve the result you're looking for. Please note I added an id to the column you want the index of just to make the example more simple, feel free to select in in anyway you desire.

<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);

CobaltHex · Accepted Answer · 2015-04-20 18:37:14Z

0

One easy way to do it is use .prevAll() on the td and then on its parent tr:

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

($td being the td elem you are checking)

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

answered Apr 20, 2015 at 18:37

CobaltHex

1171 silver badge6 bronze badges

Comments

user3550446 · Accepted Answer · 2017-07-11 14:47:06Z

0

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

answered Jul 11, 2017 at 14:47

user3550446

4653 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to get table column index using jQuery?

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related