jQueryのtoggleClassを使用してボタンのクリック時に表を切り替える方法

Question

ボタンクリックで表の列を切り替えることができるようにします。

私はjQueryのトグルクラス関数を調べ、thクラス（テーブルのヘッダ）とtd（HTMLテーブルのセル）に同じクラスを与えてから、ボタンクリックでtoggleClassを実行できると考えました。ここで

は私のDashboard.tsxファイル内の私のテーブルです：

<table> 
    <thead> 
    <tr> 
    <th class="lastname">LastName</th> 
    <tr> 
    </thead> 
    <tbody> 
    { 
    this.1stUserInfo.map((value, index, array) => { 
    return(
     <tr> 
      <td class="lastname">{value.LastName}</td> 
     </tr>); 
     }, this) 
     } 
     </tbody> 
     </table> 

は、ここに私のボタンです：

 <Button id="lastnamebutton" onClick={(e) => this.ShowLastName(e,this)}>Toggle Last Name</Button> 

そして、ここでは、私がtoggleClass

 public ShowLastName(event, caller) { 
      $("#lastnamebutton").toggleClass(".lastname"); 
     } 

を実装して、私のJavaScriptで私の機能です私は間違って何をしていますか？あるいは、テーブルの列を切り替えることができる別の方法を考えることができますか？

Answer 1

toggleClass()は、誤った要素に対して呼び出されます。 #lastnamebuttonの代わりに、.lastnameで呼び出す必要があります。

window.toggleColumn = function() { 
 
    $('.yclass').toggleClass('hide'); 
 
};

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <th>X</th> 
 
    <th class="yclass">Y</th> 
 
    <th>Z</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>42</td> 
 
     <td class="yclass">45</td> 
 
     <td>46</td> 
 
    </tr> 
 
    <tr> 
 
     <td>72</td> 
 
     <td class="yclass">62</td> 
 
     <td>22</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button onclick="window.toggleColumn()"> 
 
Click 
 
</button>