CODEWITHSUNDEEP
javascriptjquery
Sherif Hamdy
Sherif Hamdy

Reputation: 3

show / hide table rows after clicking on checkbox

I want to remove all table rows after the user had clicked the checkbox, except the table row with the checkbox itself, and to show the table rows back when unchecked the checkbox again. My code is working for removing only but I need to show the table again after unchecking it.

function Showhidefunc(btndel) {
  if (typeof(btndel) == "object") {
    $('table tr td:first-child :checkbox:not(:checked)').closest('tr').remove();
  } else {
      return false;
  }
}

<thead>
<tr>
   <th>Select</th>
   <th>Month</th>
   <th>Username</th>
   <th>Deduction</th>
</tr>
</thead>
<tbody>
<tr>
  <td><input type="checkbox" onChange="Showhidefunc(this);"></td>
  <td><?php echo $Name_row ['Month'];?></td>
  <td><?php echo $Name_row ['Username'];?></td>
  <td><?php echo $Name_row ['Total_Deduction'];?></td>
</tr>
</tbody>

Thanks Guys :)

Upvotes: 0

Views: 895

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

Don't use .remove() on the rows as this deletes them; once you remove them, they're gone and you can't get them back.

Use .hide() then .show()

function Showhidefunc(chkbox) {
    if ($(chkbox).is(":checked"))
        $('table tr td:first-child :checkbox:not(:checked)').closest('tr').hide();
    } else {
        $('table tr td:first-child :checkbox:not(:checked)').closest('tr').show();
    }
  }

UPDATED: Updated code to match html and better if/else

Version with toggle:

function Showhidefunc(chkbox) {
    $('table tr td:first-child :checkbox:not(:checked)').closest('tr').toggle(!$(chkbox).is(":checked"));
  }

As an aside, there's other ways to do this, such as using .map()

Upvotes: 2

BenM
BenM

Reputation: 4278

function Showhidefunc(btndel) { if (typeof(btndel) == "object") { $('table tr td:first-child :checkbox:not(:checked)').closest('tr').remove(); } else { return false; } }

that .remove should be .hide()

in the else you want to do the same but use .show() instead

Upvotes: 0

Related Questions