jQuery 如何使用jQuery获取表列索引？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16581420/
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
How to get table column index using jQuery?
提问by Furqan Safdar
I have adequate knowledge about jQuery and its usage but today i got into a trouble of getting the column index of matching label inside thelement of tableusing jQuery. I want to get the index of thelement having labeltext as Mobile. The index should be 2 in this case. I am getting the actual index but this is not the correct way of doing it. So i want to know why jQuery is not giving me the right index using index()method.
我对 jQuery 及其用法有足够的了解，但今天我遇到了在使用 jQuery 的th元素中获取匹配标签的列索引的麻烦table。我想获取文本为Mobile的th元素的索引。在这种情况下，索引应为 2。我得到了实际的索引，但这不是正确的方法。所以我想知道为什么 jQuery 没有使用方法给我正确的索引。labelindex()
I have also written the JS Fiddlerfor this.
我还为此编写了JS Fiddler。
jQuery
jQuery
var elem = $('#tbl th');
var rIndex;
alert('Length : ' + elem.length);
var index = elem.filter(
function(index){
var labelText = $(this).find('label').text();
//alert(index + ' - ' + labelText);
var result = labelText == 'Mobile';
if (result)
rIndex = index;
return result;
}).index();
alert("jQuery Index : " + index);
alert("Actual Index : " + rIndex);
HTML
HTML
<table id="tbl">
<tr>
<td></td>
<th><label>Application No.</label></th>
<td></td>
<th><label>Name</label></th>
<td></td>
<th><label>Mobile</label></th>
<td></td>
<th><label>Gender</label></th>
</tr>
</table>
回答by rahul maindargi
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
如果没有参数传递给 .index() 方法，则返回值是一个整数，指示 jQuery 对象中第一个元素相对于其兄弟元素的位置。
This will give you real index DEMO
这会给你真正的索引 DEMO
elem.each(function(){
if( $(this).find('label').text()=='Mobile') {
alert(elem.index(this));
}
});
回答by Manoj Mohandas
You can use rowIndex for row index and event object to get the cellIndex.
您可以使用 rowIndex 作为行索引和事件对象来获取 cellIndex。
this.rowIndex //for row index
e.toElement.cellIndex //for column index
Fiddle below
小提琴下面
回答by WHY
For Some Ref:
对于一些参考：
$('input').blur(function() {
var total_qty = 0;
var $td = $(this).closest('td');
var col = $td.parent().children("td").index($td);
$('table tbody tr').each(function() {
var $td = $(this).find('td:eq('+col+')');
var qty = $td.find('input').val();
if(qty != '') total_qty += qty;
});
console.log(total_qty);
});
回答by Ahmed Abumostafa
$('#tbl').find('th').each(function($index){
if($(this).children('label').html() == 'Mobile')
alert($index);
})
回答by Raimond Kuipers
The Index function returns the index based upon the list you provide. In this case the outcome of the filter.
Index 函数根据您提供的列表返回索引。在这种情况下，过滤器的结果。
Hope this helps
希望这可以帮助
回答by Sam Shiles
"If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements."
“如果没有参数传递给 .index() 方法，则返回值是一个整数，指示 jQuery 对象中第一个元素相对于其兄弟元素的位置。”
source http://api.jquery.com/index/
来源http://api.jquery.com/index/
Below is an example of how to use index() to achieve the result you're looking for. Please note I added an id to the column you want the index of just to make the example more simple, feel free to select in in anyway you desire.
下面是一个如何使用 index() 来实现您正在寻找的结果的示例。请注意，我在您想要索引的列中添加了一个 id，只是为了使示例更简单，您可以随意选择。
<table id="tbl">
<tr>
<td></td>
<th><label>Application No.</label></th>
<td></td>
<th><label>Name</label></th>
<td></td>
<th id="mobile"><label>Mobile</label></th>
<td></td>
<th><label>Gender</label></th>
</tr>
</table>
var elem = $('#tbl th');
var rIndex;
alert('Length : ' + elem.length);
var index = elem.filter(
function(index){
var labelText = $(this).find('label').text();
//alert(index + ' - ' + labelText);
var result = labelText == 'Mobile';
if (result)
rIndex = index;
return result;
}).index();
alert("jQuery Index : " + index);
alert("Actual Index : " + rIndex);
correctIndex = $('th').index($('#mobile'))
alert("Used correctly :" + correctIndex);
回答by user3550446
$('table th').each(function(i){
if($($(this).find('label')).html() == "Name"{
console.log("position= " + i); return false;
}
});
回答by CobaltHex
One easy way to do it is use .prevAll() on the td and then on its parent tr:
一种简单的方法是在 td 上使用 .prevAll()，然后在其父 tr 上使用：
var row = $td.closest('tr').prevAll().length;
var col = $td.prevAll().length;
($td being the td elem you are checking)
( $td being the td elem you are checking)
