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()方法，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

另见closest()

Answer 2

尝试使用jQuery索引，但不能使用System.out.println(fruits[1].length);本身，而是使用input父级。

td

上面的id将是var thisRow = $(this).parent('td'); var id = $('td').index(thisRow);的索引，因此输入索引。

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

试试lodash.js。例如：

<强> HTML

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

<强> JS：

{{1}}

Answer 5

这有效：

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

Answer 6

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

6 个答案: