使用 jQuery 查找表行索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1620391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find Table Row Index using jQuery
提问by superachu
I'm an intermediate user in jQuery. I know to find the rowIndex of a table using jQUery, but my scenario is a different one. My table(GridView) consists of 20 columns and each column with different controls like textbox, dropdownlist, image, label. All are server side controls in each row. I bind the gridview with the records from the database. Now when I click on any control or onchange of any textbox, I need to get the rowIndex of that changed column's row. Here is the code I've user:
我是 jQuery 的中级用户。我知道使用 jQUEry 查找表的 rowIndex，但我的场景是不同的。我的表（GridView）由 20 列组成，每列都有不同的控件，如文本框、下拉列表、图像、标签。每行都是服务器端控件。我将 gridview 与数据库中的记录绑定。现在，当我单击任何控件或任何文本框的 onchange 时，我需要获取已更改列的行的 rowIndex。这是我用户的代码：
$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
alert($(this).closest('td').parent().attr('sectionRowIndex'));
});
But I'm unable to get the rowIndex. If I use any html control inside the gridview, I'm able to get the rowIndex. Is there any way to find out the rowIndex when a server control inside the gridview is clicked?
但我无法获得 rowIndex。如果我在 gridview 中使用任何 html 控件，我就可以获得 rowIndex。单击 gridview 内的服务器控件时，有什么方法可以找出 rowIndex 吗？
回答by Darin Dimitrov
Try this:
尝试这个：
var rowIndex = $(this)
.closest('tr') // Get the closest tr parent element
.prevAll() // Find all sibling elements in front of it
.length; // Get their count
回答by BenSwayne
sectionRowIndexis a property of the <tr>element, not an attribute.
sectionRowIndex是<tr>元素的属性，而不是属性。
The correct way to modify your sample code is to access the jQuery item with a zero indexer like this:
修改示例代码的正确方法是使用零索引器访问 jQuery 项，如下所示：
$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
alert($(this).closest('td').parent()[0].sectionRowIndex);
});
This will return the correct row index for you. Also, if you are going to use jQuery's .closest()function to traverse up the DOM and also .parent(), why not compine those two and just traverse up to the closest <tr>element?
这将为您返回正确的行索引。此外，如果您打算使用 jQuery 的.closest()函数来遍历 DOM 和.parent()，为什么不组合这两个函数并只遍历最近的<tr>元素呢？
$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
alert($(this).closest('tr')[0].sectionRowIndex);
});
This will also handle weird cases where the parent->child relationship isn't exactly what you expected. For example if you chained a $(this).parent().parent()and then decided to wrap your inner cell with another div or span, you might screw up the relationship. The .closest()is the easy way out to make sure it will always work.
这也将处理父-> 子关系不完全符合您预期的奇怪情况。例如，如果您将 a 链接起来$(this).parent().parent()，然后决定用另一个 div 或 span 包裹您的内部单元格，那么您可能会搞砸这种关系。这.closest()是确保它始终有效的简单方法。
Of course my code samples are re-using your provided sample above. You may wish to test with a simpler selector first to prove it works, then refine your selectors.
当然，我的代码示例正在重复使用您上面提供的示例。您可能希望首先使用更简单的选择器进行测试以证明其有效，然后再完善您的选择器。
回答by PruitIgoe
This is for a checkbox in the table cell, on change:
这是针对表格单元格中的复选框，在更改时：
var row = $(this).parent().parent();
var rowIndex = $(row[0].rowIndex);
console.log(rowIndex);
回答by David
Should be able to just use:
应该可以只使用：
var rowIndex = $(this).parents("tr:first")[0].rowIndex;
