how to get current input field index by jquery

Question

I have following html table layout:

<table id="mytable">
<tbody>
<tr>
    <td><input type="text" value="" /></td>
    <td><input type="text" value="" /></td>
    <td><input type="text" value="" /></td>
    <td>Some cell text</td>
    <td></td>
    <td><input type="text" value="" /></td>
    <td></td>
  </tr>
  <tr>
    <td><input type="text" value="" /></td>
    <td><input type="text" value="" /></td>
    <td>Some cell text</td>
    <td></td>
    <td>Some cell text</td>
    <td><input type="text" value="" /></td>
  </tr>

</tbody>
</table>

I need to know the current input field index of respective row while click on any input field but can't figure out a way to get it. I can get total number of input fields (length) of each row by following formula:

var thisRow = $(this).closest('tr');
var inputLength = thisRow.find('input[type="text"]').length;

As for example the inputLength for first row is 4 and second row is 3. But how can I get the input index when a user clicks on 2nd input field of first row (it should be 1)?

[note: I can't use td index as alternative of input field index as you may see that there might have been some td which have no input field. As a result, if I run a for loop it can't be performed as I expected.]

T J · Accepted Answer · 2015-10-18 06:00:30Z

3

You can use the index() method as follows:

$(':input').on('click', function() {
  console.log($(this).closest('tr').find(':input').index(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>Some cell text</td>
      <td></td>
      <td>
        <input type="text" value="" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>Some cell text</td>
      <td></td>
      <td>Some cell text</td>
      <td>
        <input type="text" value="" />
      </td>
    </tr>
  </tbody>
</table>

Also see closest()

edited Oct 18, 2015 at 6:00

answered Oct 18, 2015 at 5:51

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

2 Comments

Abdullah Mamun-Ur- Rashid Over a year ago

I don't know whether there is more suitable solution or not, but till now, this is the only solution I got from you. If no other user can give more suitable solution within today, I will accept your answer.

Amin NAIRI Over a year ago

It works as well with element that contains data-* like $('[data-nav]').focus(function() {$(this).closest('tr').find('[data-nav]:input').index($(this))}).

Farzad Yousefzadeh · Accepted Answer · 2015-10-18 05:54:32Z

1

Try using jQuery index but not on the input itself but on the td parent.

var thisRow = $(this).parent('td');
var id = $('td').index(thisRow);

The id above would be the index of td and therefor the index of input.

answered Oct 18, 2015 at 5:54

Farzad Yousefzadeh

2,6291 gold badge24 silver badges29 bronze badges

2 Comments

Abdullah Mamun-Ur- Rashid Over a year ago

I can't use td index as alternative of input index. There may be some td in the middle of the same row which have no input fields. So, if a row has 10 tds and 8 input fields, then obviously index of td will not match index of input field.

Farzad Yousefzadeh Over a year ago

@AbdullahMamun-Ur-Rashid You did not mention that situation in your question as all td element in the code you provided in the question actually has an input.

MUHAMMAD MUBUSHER ASLAM · Accepted Answer · 2015-10-18 06:07:43Z

1

please check the below solution

$('input[type="text"]').on('keypress', function(e){
    $this = $(this);   

    var td = $this.parents('td');
    var tr = $this.parents('tr');

    var col = td.parent().children().index(td);

    $('div').html('you are changing the value of column.#. '+col)

})

https://jsfiddle.net/93k7g4v7/

answered Oct 18, 2015 at 6:07

MUHAMMAD MUBUSHER ASLAM

3092 silver badges22 bronze badges

1 Comment

Abdullah Mamun-Ur- Rashid Over a year ago

I can't use td index as alternative of input index. There may be some td in the middle of the same row which have no input fields. So, if a row has 10 tds and 8 input fields, then obviously index of td will not match index of input field. I have updated your fiddle with one td which has no input field. Now look at the index differences. link: jsfiddle.net/93k7g4v7/1

K K · Accepted Answer · 2015-10-18 05:51:14Z

0

Try index . Example:

HTML

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

JS:

var listItem = document.getElementById("bar");
alert("Index: " + $("li").index(listItem));

answered Oct 18, 2015 at 5:51

K K

18.2k4 gold badges33 silver badges39 bronze badges

1 Comment

Abdullah Mamun-Ur- Rashid Over a year ago

List item and table row are two different things. Here you all have list items (li) in a user list (ul). But in a table row there may be less number of input fields than td/cell numbers. So the identifying of index will be different in those two cases.

guest271314 · Accepted Answer · 2015-10-18 06:49:26Z

Try using .each(function(index, element){}) to attach click event handler , reference index of input element at click handler

$("input").each(function(index) {
  this.onclick = function() {
    console.log(index)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr><td><input type="text" value="" /></td><td><input type="text" value="" /></td><td><input type="text" value="" /></td><td>Some cell text</td><td></td><td><input type="text" value="" /></td><td></td></tr>
<tr><td><input type="text" value="" /></td><td><input type="text" value="" /></td><td>Some cell text</td><td></td><td>Some cell text</td><td><input type="text" value="" /></td></tr>
</tbody>
</table>

PapaHotelPapa · Accepted Answer · 2015-10-18 07:58:42Z

0

This works:

<script>
$(document).ready(function(){
    $('input[type="text"]').click(function(){
        var rowIndex = $(this).parent().parent().index('tr');
        if (rowIndex == 0) {
            var inputIndex = $('tr:eq(0) input[type="text"]').index(this);
        } 
        else if (rowIndex == 1) {
            var inputIndex = $('tr:eq(1) input[type="text"]').index(this);
        };
    });
});
</script>

And here's the fiddle: https://jsfiddle.net/Mjollnir40/es7o8jf5/6/

edited Oct 18, 2015 at 7:58

answered Oct 18, 2015 at 6:35

PapaHotelPapa

6976 silver badges20 bronze badges

3 Comments

Abdullah Mamun-Ur- Rashid Over a year ago

Sorry, but your fiddle is empty (blank)!! If I check your fiddle in a suitable fiddle, I found your code gives cumulative index of all input fields. As for example, if row-01 have 5 input fields (with one blank td), it gives index of last input field as 3, it is okay. But from second row, index of first input begins from 4, it should not be. It should be from 0 again.

PapaHotelPapa Over a year ago

I've edited my answer to include the changes. It'll work for you now. You just alert inputIndex or set it equal to a var or whatever you need.

Abdullah Mamun-Ur- Rashid Over a year ago

Sorry, but your updated fiddle does not alert or show anything.

Collectives™ on Stack Overflow

how to get current input field index by jquery

6 Answers 6

2 Comments

2 Comments

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related