如何通过jquery获取当前输入字段索引

Question

我有以下 html 表格布局：

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

单击任何输入字段时，我需要知道相应行的当前输入字段索引，但无法找到获取它的方法。我可以通过以下公式获得每行的输入字段总数（长度）：

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

例如，第一行的inputLength 是4，第二行是3。但是当用户点击第一行的第二个输入字段（应该是 1）时，如何获取输入索引？

[注意：我不能使用td 索引来替代input 字段索引，因为您可能会看到可能有一些td 没有input 字段。结果，如果我运行for loop，它就无法按预期执行。]

Answer 1

您可以使用index()方法如下：

$(':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>

另见closest()

Answer 2

尝试使用 jQuery 索引，但不要在 input 本身上，而是在 td 父级上。

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

上面的 id 将是 td 的索引，因此是输入的索引。

Answer 3

请检查以下解决方案

$('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/

Answer 4

试试index。示例：

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

Answer 5

尝试使用.each(function(index, element){}) 附加click 事件处理程序，在click 处理程序处引用input 元素的index

$("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>

Answer 6

这行得通：

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

这是小提琴：https://jsfiddle.net/Mjollnir40/es7o8jf5/6/