我用Jquery隐藏表行后尝试从Bootstrap重新应用表分条。复选框用于隐藏单元格包含“否”的行。当我使用hide()函数时,条带在隐藏行后正确应用,但是如果我使用fadeOut()函数,则条带无法正确应用
$(document).ready(function () {
$('#customSwitch1').change(function () {
if (!this.checked)
$('#indexTable tr td:contains(No)').parent().fadeIn('fast');
else
$('#indexTable tr td:contains(No)').parent().hide();
$("#indexTable tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
});
});
$('#customSwitch1').change();
});
如果我用hideout替换hide(),则条纹将无法正确应用(或将持续时间放入hide函数中)
您需要在淡入淡出功能中使用回调函数,以便在运行代码以重新应用分拆时,行实际上是不可见的/可见的。否则淡入淡出功能的动画将无法完成,该行仍然可见并且您的条纹被弄乱了
$(document).ready(function () {
$('#customSwitch1').change(function () {
if (!this.checked) {
$('#indexTable tr td:contains(No)').parent().fadeIn('slow', reapplyStripes);
}else {
$('#indexTable tr td:contains(No)').parent().fadeOut('slow', reapplyStripes);
}
});
$('#customSwitch1').change();
});
function reapplyStripes() {
$("#indexTable tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<input type="checkbox" id="customSwitch1" />
<table class="table table-striped" id="indexTable">
<tr>
<td>YES</td>
</tr>
<tr>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
</tr>
</table>
嗨,看来我现在还有另一个小问题。我在表列上也有一个排序脚本,当我在不同列上对表进行排序时,剥离变得混乱。我认为这是因为最初的引导程序会按位置划分行。任何提示都很好。
难道您只是将reapplyStripes函数添加为排序Funktion的回调?
我希望保留最初的表格式,因为对它进行排序通常不会弄乱条带化。我恳求意识到这可能需要删除行,而不是隐藏行,然后将其附加回去