单击复选框后显示/隐藏表格行

时间:2016-08-01 09:24:59

标签: javascript jquery

我希望在用户单击复选框后删除所有表行,除了具有复选框本身的表行,并在再次取消选中该复选框时显示表行。我的代码仅用于删除,但我需要在取消选中后再次显示该表。

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>

谢谢大家:)

2 个答案:

答案 0 :(得分:2)

不要在行上使用.remove(),因为这会删除它们;一旦你删除它们,它们就会消失,你无法取回它们。

使用.hide()然后.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();
    }
  }

更新:更新了匹配html的代码,更好的是if / else

toggle的版本:

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

除此之外,还有其他方法可以做到这一点,例如使用.map()

答案 1 :(得分:0)

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

.remove应为.hide()

在其他地方你想要做同样的事情但是使用.show()代替