我有以下代码,旨在根据复选框隐藏/显示表格的特定行:
$(document).ready(function(){
$("#activate").click(function(){
if ($("#activate").prop('checked')){
$(".hidden").css("display","");
} else {
$(".hidden").css("display","none");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="activate" checked>
See all rows
<br>
<br>
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Data1</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="hidden">
<td>Data2</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data3</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="hidden">
<td>Data4</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
当我想首先显示所有行时这很好用,但当我试图首先只显示特定行时(这正是我需要的)。
我尝试使用 toggleClass() 方法,但代码只工作了一次,我可以使用 jquery 的其他选项吗?
最佳答案
你可以在 .trigger('click')
上链接:
$(document).ready(function(){
$("#activate").click(function(){
if ($("#activate").prop('checked')){
$(".hidden").css("display","");
} else {
$(".hidden").css("display","none");
}
}).trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="activate" checked>
See all rows
<br>
<br>
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Data1</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="hidden">
<td>Data2</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data3</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="hidden">
<td>Data4</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
关于jquery - 使用 jquery 隐藏/显示表格 CSS 的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35708432/