JQuery / Javascript - 如何通过标题文本查找表头的索引

时间:2012-03-09 19:33:19

标签: javascript jquery html-table

通过显示文本找到列索引的好方法是什么?

e.g。

<table>
   <tr>
     <td>ID</td>
     <td>Name</td>
     <td>Age</td>
   </tr>
   <tr>
      ...
   </tr>
</table>

我想要像

这样的东西
var nameIndex = getColIndex('Name'); // nameIndex = 1

有快速/好的方法吗? (不一定是jQuery,但会很好)

3 个答案:

答案 0 :(得分:17)

在Chromium 17 / Ubuntu 11.04中,以下两者似乎都有效:

$('tr td').filter(
    function(){
        return $(this).text() == 'Name';
    }).index();

JS Fiddle demo

或者:

$('td:contains("Name")').index();

JS Fiddle demo


编辑以回应OP的问题,在下面的评论中:

  

但是如何将其限制在第一行?

要将其限制在第一行,只需使用:first选择器:

$('tr:first td')

,并提供:

$('tr:first td').filter(
    function(){
        return $(this).text() == 'Name';
    }).index();

JS Fiddle demo

参考文献:

答案 1 :(得分:2)

//select the first TR element, then select its children (the TDs),
//then filter them down to only the one that contains a certain string
var theIndex = $('tr').first().children().filter(function () {
    return ($(this).text() == 'ID');
}).index();

当传递.filter()函数时,如果为索引返回true,那么它将保留在选择中,如果您返回false,那么该索引将从选择:http://api.jquery.com/filter

这会将搜索限制在第一行,并为列提供指定搜索文本的索引(此代码使用ID)。

请注意.index(),如上所述,将根据其兄弟元素返回当前选择的索引:http://api.jquery.com/index

答案 2 :(得分:1)

http://jsfiddle.net/justiceerolin/FdhcV/

$(function(){
    $('#search').click(function(){
        $('td').each(function(index){
            if ($(this).text() == $('#lookup').val()){
                console.log(index)
            }
        });    
    });   
});​