如何使用jQuery的toggleClass在按鈕單擊列中切換表

Question

因此，我希望能夠通過單擊按鈕在表格中切換列。

我研究了jQuery的toggle類函數，發現可以給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>  

這是我在JavaScript中實現toggleClass的函數

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

我在做什么錯和/或您能想到另一種方法來切換表格中的列？

Answer 1

toggleClass()在不正確的元素上調用。 代替#lastnamebutton ，應該在.lastname上調用.lastname 。

這是一個示例（順便說一句，這種情況與React無關）：

 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>