CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Algorithmic Programmer
Algorithmic Programmer

Reputation: 766

How to toggle table in column on button click using jQuery's toggleClass

So, I want to be able to toggle a column in a table on a button click.

I looked into jQuery's toggle class function and figured I could give the th (table header) and td (cell in HTML table) the same class and then do a toggleClass on a button click.

Here's my table in my Dashboard.tsx file:

  <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>

Here's my button:

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

And here's my function in my JavaScript where I implement toggleClass

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

What am I doing wrong and/or can you think of another way I can toggle a column in my table?

Upvotes: 0

Views: 1655

Answers (1)

shaochuancs
shaochuancs

Reputation: 16276

The toggleClass() is invoked on the incorrect elements. Instead of #lastnamebutton, it should be invoked on .lastname.

Here is an example (BTW, this case is not related with 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>

Upvotes: 1

Related Questions