2017-04-09 8 views
0

を使用してテーブル内のネストされた行を選択します。(これは一例です)、次のHTMLテーブルを考えるとjQueryの

<table> 
    <tbody> 
     <tr> 
      <th>First</th> 
      <th>Second</th> 
     </tr> 
     <tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
      </tr> 
      <tr> 
       <td>X</td> 
       <td>X</td> 
      </tr> 
     </tr> 
     <tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
      </tr> 
      <tr> 
       <td>X</td> 
       <td>X</td> 
      </tr> 
     </tr> 
     <tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
      </tr> 
      <tr> 
       <td>X</td> 
       <td>X</td> 
      </tr> 
     </tr> 
     <tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
      </tr> 
      <tr> 
       <td>X</td> 
       <td>X</td> 
      </tr> 
     </tr> 
    </tbody> 
</table> 

私は「X」(そうTDタグも)を含んを選択したいですJQueryを使用します。私はこれを行うための正しいセレクターを見つけることができません。

私は試しました:table tr tr:last-childこれは動作しません。この小さなコードは、「テーブルの親を持つtr親を持つ最後のtr子を与える」ことを意味するはずです。

UPDATE:のX

は一例です。実際のプロジェクトでは、選択したい行に入力要素のセットが含まれています。私はそれらの行を隠すためにそれらの行を選択したいが、内容(入力要素)は隠さない。次に、他の行(名前を含む行)を選択できる必要があります。

+3

まず、あなたは無効である、あなたは別の 'tr'の直接の子として' tr'を持っているので、それを修正し、それが行われたときに、私たちを見ることができないマークアップ図面、または2つ、どのように見えるか – LGSon

答えて

1

$("tr") 
    .filter(function(index) { 
    return $(this).text().indexOf('X') != -1; 
    }) 
+0

質問が更新されました。 – user3075478

+0

@ user3075478例も入れてください。 – xhg

0

(次のコードをテストしていない).filter()

を試してみてください、あなたのテーブルには、そのようにどのように機能するかを説明していただけますか?

別の行の中のネストした表の行は、その行の中の新しい表に入れる必要がありますか? これは、1つの行の中で2つの異なるテーブルを参照しようとしていますか?

この権利はありますか?

私の例では、あなたのhtmlテーブルを構造化すると、次のスニペットで尋ねるべきことがあります。

$('table').on('click','td',function(e){ 
 

 
// e.stopPropagation(); 
 
    var t = $(this); 
 
    
 
    t.find('tr:last-child').toggleClass('highlight'); 
 
});
tr:hover { background-color: lightblue; } 
 
.highlight { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
      <th>First</th> 
 
      <th>Second</th> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <table> 
 
       <tbody> 
 
      <tr> 
 
       <td>Alfreds Futterkiste</td> 
 
       <td>Maria Anders</td> 
 
      </tr> 
 
      <tr> 
 
       <td>X</td> 
 
       <td>X</td> 
 
      </tr> 
 
      </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <table> 
 
       <tbody> 
 
      <tr> 
 
       <td>Alfreds Futterkiste</td> 
 
       <td>Maria Anders</td> 
 
      </tr> 
 
      <tr> 
 
       <td>X</td> 
 
       <td>X</td> 
 
      </tr> 
 
      </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
       <tr> 
 
      <td colspan="2"> 
 
       <table> 
 
       <tbody> 
 
      <tr> 
 
       <td>Alfreds Futterkiste</td> 
 
       <td>Maria Anders</td> 
 
      </tr> 
 
      <tr> 
 
       <td>X</td> 
 
       <td>X</td> 
 
      </tr> 
 
      </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

関連する問題