如何获得的jQuery

当前输入字段索引我有以下的HTML表格布局：如何获得的jQuery

<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它不能如我所料地执行。]

来源

2015-10-18 Abdullah Mamun-Ur- Rashid

如下可以使用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()

来源

2015-10-18 05:51:23

我不知道是否有更合适的解决方案，但直到现在，这是我从你那里得到的唯一解决方案。如果今天没有其他用户可以提供更合适的解决方案，我会接受您的答案。 –

我接受了你的回答。非常感谢你。 –

它也适用于包含'data- *'的元素，比如$（'[data-nav]'）。focus（function（）{$（this）.closest（'tr'）。find（'[data -nav]：输入'）指数（$（本））}）'。 –

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

来源

2015-10-18 05:51:14

列表项和表行是两回事。在这里，你在用户列表（ul）中都有列表项目（li）。但是在表格行中，输入字段的数量可能比td/cell号码少。因此，在这两种情况下，索引的识别会有所不同。 –

尝试使用jQuery指数而不是对input本身，而是对td父。

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

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

来源

2015-10-18 05:54:32

我不能使用'td'索引来替代'input'索引。在同一行的中间可能有一些'td'没有输入字段。所以，如果一行有10个“tds”和8个“输入”字段，那么显然td的索引将不匹配输入字段的索引。 –

请看下面的例子：https://jsfiddle.net/93k7g4v7/1/ –

@ AbdullahMamun-Ur-Rashid你没有在你的问题中提到这种情况，因为你在问题中提供的代码中的所有td元素实际上都有输入。 –

请检查下面的解决方案

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

来源

2015-10-18 06:07:43

我无法使用td索引作为输入索引的替代选项。在同一行的中间可能有一些没有输入字段的td。所以，如果一行有10个tds和8个输入字段，那么显然td的索引将不匹配输入字段的索引。我用一个没有'input'字段的td更新了你的小提琴。现在看看指数的差异。链接：https：//jsfiddle.net/93k7g4v7/1/ –

请尝试这个 https://jsfiddle.net/93k7g4v7/4/ –

我希望这可以为你工作 –

这工作：

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

来源

2015-10-18 06:35:19 PapaHotelPapa

对不起，但你的小提琴是空的（空白）！如果我在合适的小提琴中检查你的小提琴，我发现你的代码给出了所有输入字段的累积索引。例如，如果row-01有5个输入字段（带有一个空白td），则它将最后一个输入字段的索引设置为3，这没问题。但从第二行开始，第一次输入的索引从4开始，不应该是。它应该从0开始。 –

试试这个：https：//jsfiddle.net/Mjollnir40/es7o8jf5/。 – PapaHotelPapa

对不起。 – PapaHotelPapa

尝试使用.each(function(index, element){})附加click事件汉dler，参考input元素的index在click处理

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

来源

2015-10-18 06:49:26 guest271314

如何获得的jQuery

回答

相关问题