2011-12-22 9 views
2

私は次のようなテーブルを持っています。JQueryの横断テーブルの列

<table> 
<tr> 
<th scope="col"></th> 
<th scope="col">Column One</th> 
<th scope="col">Column Two</th> 
<th scope="col">Column Three</th> 
<th scope="col">Column Four</th> 
</tr> 
<tr> 
<th scope="row">Row One</th> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<th scope="row">Row Two</th> 
<td></td> 
<td></td> 
<td class="click"></td> 
<td></td> 
</tr> 
<tr> 
<th scope="row">Row Three</th> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<th>Row Four</th> 
<td></td> 
<td></td> 
<td class="target"></td> 
<td></td> 
</tr> 
<table> 

私は「クリック」のクラスに<td>をクリックし、ターゲットのクラスと<td>がどのように多くの行を離れてのように私を警告できるようにしたいと思います。 (上記の例では2を返します)。

他の<td>要素がターゲットのクラスを持つテーブルに存在することがあります。私はの次ののターゲットと同じ行にある「クリックされた」tdまでの行数にのみ興味があります。 「クリックされた」<td>以上のターゲットは無視する必要があります。

同じ行のクリックされた要素の後に他の 'ターゲット' <td>がない場合、アラートには「他のターゲットはありません」と表示されます。

これは明らかです。

+0

あなたの質問は何ですか?あなたはすでに自分で何をしていますか? –

答えて

1

を選択するために、トラバーサルメソッドを使用してparent()closest()、兄弟と一緒に、次の、前の、などの組み合わせを使用して解決策を見つけることができますか?

var targetRowIndex = $('.target')[0].parentNode.rowIndex; 

$(".click").bind("click",function(){ 
    alert(targetRowIndex - this.parentNode.rowIndex); 
}); 

http://jsfiddle.net/BZDyr/3/

あなたがそのコードで何が起こっているか理解する場合は、おそらく正確な機能を自分の残りの部分を実装することができます。

+0

こんにちは、これは本当に近いですが、targetRowIndexは常にテーブル内の '.target'のクラスを持つ最初の要素を返します。 ".click"と同じ表の列にある '.target'のクラスを持つ* next *要素のインデックスのみを返すことが必要です – user469453

+0

@ user469453はい、私はあなたが直接コピーできるコードを作っていませんでしたペースト。だからこそ、「コード内で何が起こっているのか分かるならば、おそらく正確な機能の残りの部分を実装することができます。単純に、アプリケーションを作成せずに 'rowIndex'をどのように取得できるかを単に示しています。 :)ヒント: 'targetRowIndex'は静的で、' [0] 'はクラス' .target'を持つ最初の要素を意味します。 :P – Esailija

+0

こんにちはEsailija、すてきなことありがとう - 私も列インデックスを見つけることができる方法はありますか(私はcolIndexにrowIndexを変更することを明らかにしました)? – user469453

1

あなたはおそらく、あなたがこのように意味するか、基本的"td.target"

関連する問題