JQueryを使用してPHPで作成されたテーブルのクラスを検索して使用する

Question

ログからエントリのリストを持つテーブルを作成しました。各エントリは、特定のハードドライブを参照します。最新のエントリが各ドライブに表示され、クリックされると、それ以前のすべてのエントリが表示されるようにしています。

私の理論はこれまで、特定のドライブに関連する各エントリに同じクラスを与えることです。たとえば、「branded1」という名前のドライブに関するすべてのエントリには「branded1」というクラスがあり、次に:firstセレクタを使用して最初のエントリを表示し、残りをクリックして切り替えることができます。これは、次のコードで動作します：

$(".branded2:first").click(function(){ 
      $(".branded2:not(:first)").toggle(); 
     }) 

問題は、現時点では私はすでに事前に私のjQueryのスクリプトにクラスをスクリプト化している必要があるということですが、私は、アプリ自体を更新できるようにしたいです。 jQueryがテーブルを検索してクラスを探す方法はありますか？その情報を使って、各クラスに対して同様の機能を自動的に作成することができました。ここに私のテーブルがどのように見えるかです：私は、HTML5はあなたを与えるcustom data-* attributesを使用してお勧めしたい

<table class="table"> 
    <tr> 
     <th>Drive Name</th> 
     <th>Status</th> 
     <th>Date</th> 
     <th>Notes</th> 
     <th>User</th> 
    </tr> 
    <tr> 
     <td><a class="Branded2"></a>Branded 2</td> 
     <td>In</td> 
     <td>2017-03-26 11:18:13</td> 
     <td></td> 
     <td>frank</td> 
    </tr> 
    <tr class="Branded2"> 
     <td>Branded 2</td> 
     <td>Out</td> 
     <td>2017-03-26 10:48:37</td> 
     <td>shoot</td> 
     <td>frank</td> 
    </tr> 
    <tr> 
     <td><a class="ID1"></a>iD 1</td> 
     <td>In</td> 
     <td>2017-03-26 10:47:29</td> 
     <td>rushes</td> 
     <td>maddie</td> 
    </tr><tr> 
     <td><a class="Branded7"></a>Branded 7</td> 
     <td>Out</td> 
     <td>2017-03-26 13:19:11</td> 
     <td></td> 
     <td>frank</td> 
    </tr> 
    <tr class="Branded7"> 
     <td>Branded 7</td> 
     <td>In</td> 
     <td>2017-03-26 13:19:04</td> 
     <td></td> 
     <td>frank</td> 
    </tr> 
</table> 

Answer 1

。 jQueryのdata() functionは値をプルすることができ、それを使って選択するクラス名を作成できます。このような何か作業をする必要があります：

$("a.hideshow").click(function(e) { 
 
    var classname = $(this).data("toggles"); 
 
    $("tr." + classname).not($(this).parents("tr")).toggle(); 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
    <tr> 
 
     <th>Drive Name</th> 
 
     <th>Status</th> 
 
     <th>Date</th> 
 
     <th>Notes</th> 
 
     <th>User</th> 
 
    </tr> 
 
    <tr class="Branded2"> 
 
     <td><a class="hideshow" data-toggles="Branded2">Branded2</a></td> 
 
     <td>In</td> 
 
     <td>2017-03-26 11:18:13</td> 
 
     <td></td> 
 
     <td>frank</td> 
 
    </tr> 
 
    <tr class="Branded2"> 
 
     <td>Branded 2</td> 
 
     <td>Out</td> 
 
     <td>2017-03-26 10:48:37</td> 
 
     <td>shoot</td> 
 
     <td>frank</td> 
 
    </tr> 
 
    <tr class="ID1"> 
 
     <td><a class="hideshow" data-toggles="ID1">ID1</a></td> 
 
     <td>In</td> 
 
     <td>2017-03-26 10:47:29</td> 
 
     <td>rushes</td> 
 
     <td>maddie</td> 
 
    </tr> 
 
    <tr class="Branded7"> 
 
     <td><a class="hideshow" data-toggles="Branded7">Branded7</a></td> 
 
     <td>Out</td> 
 
     <td>2017-03-26 13:19:11</td> 
 
     <td></td> 
 
     <td>frank</td> 
 
    </tr> 
 
    <tr class="Branded7"> 
 
     <td>Branded 7</td> 
 
     <td>In</td> 
 
     <td>2017-03-26 13:19:04</td> 
 
     <td></td> 
 
     <td>frank</td> 
 
    </tr> 
 
</table>

は、私はまた、クリックされた要素の親をトグル避けるために、jQueryのnot()機能を使用しました。これにより、関連するすべての<tr>要素に、最初の要素を除くすべての要素の代わりにクラスを適用できます。