温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Jquery hiding table rows hide() vs fadeOut() stripe table
bootstrap-4 javascript jquery

javascript - jQuery隐藏表行hide()vs fadeOut()条带表

发布于 2020-03-27 11:27:57

我用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函数中)

查看更多

查看更多

提问者
ys1122
被浏览
117
Lapskaus 2019-07-03 23:10

您需要在淡入淡出功能中使用回调函数,以便在运行代码以重新应用分拆时,行实际上是不可见的/可见的。否则淡入淡出功能的动画将无法完成,该行仍然可见并且您的条纹被弄乱了

$(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>