2012-03-09 16 views
4

表示テキストで列のインデックスを見つけるにはどうすればよいでしょうか?JQuery/Javascript - ヘッダーテキストでテーブルヘッダーのインデックスを検索する方法

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

私はそれを行うには、迅速/良い方法はあり

var nameIndex = getColIndex('Name'); // nameIndex = 1 

のようなものを持っていると思いますか? (jQueryのである必要はありませんが、いいだろう)

+0

私は、より大きな文脈を知るために好奇心だろうあなたの質問。 'Name'が別の列に入ることを期待しているのですか、それとも常に' 1'ですか? –

+0

ええと、列が動いているかもしれません...だからこそ名前で検索したいのですが(不変です) –

+1

他の列に 'Name'の部分文字列を入れることは可能でしょうか?空白についてはどうですか?改行のような空白が先頭または末尾にある可能性はありますか? –

答えて

16

次は両方のクロム17/Ubuntuの11.04で、動作するようです:

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

JS Fiddle demo

または:

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

JS Fiddle demo


コメントで、下に、OPの質問に応答したを編集:

が、どのように私は、最初の行に制限しますか?手渡す

$('tr:first td') 

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

JS Fiddle demo

単に:firstセレクタを使用して、最初の行に限定します。

参考文献:

+0

ありがとうございますが、どうすれば最初の行に制限できますか?これは私がちょっと混乱したところです –

+0

私はあなたの解決策に最初の行に制限するためにこれを追加しました... var index = $( 'tr:eq(0)td:contains( "Name")')。index (); http://jsfiddle.net/9uPWe/ –

+0

セレクタは$( 'tr:eq(0)td') –

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

1

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

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

ニースの検索ボックス... –

関連する問題