table condition hidden/show

Change class name on click in jQuery

by Nikhil krishnan

HTML

<div class="table-wrap">

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td class="end">Peter</td>
      <td class="end">Griffin</td>
      <td class="end">$100</td>
    </tr>
    <tr>
      <td>Lois</td>
      <td>Griffin</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>Joe</td>
      <td>Swanson</td>
      <td>$300</td>
    </tr>
    <tr>
      <td>Cleveland</td>
      <td>Brown</td>
      <td>$250</td>
    </tr>
  </table>
</div>

CSS

table,
td,
th {
  border: 1px solid #ccc;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.end {
  visibility: hidden;
}

JavaScript

$('.table-wrap tr').children('td').each(function() {
  if ($(this).hasClass('end')) { 
    var thisParent = $(this).parent(); 
    if(thisParent.find('td.end').length == 3) { 
      $(this).parent().hide();
    }
  }
});