3

我有一个 jsfiddle 在这里演示了这个问题：http: //jsfiddle.net/xjmwY/

基本上，我有一个使用 nth-child(odd) 规则的 css3 斑马条纹表。

.myTable tr {
    background-color: #efefef;
}
.myTable  tr:nth-child(odd) {
    background-color: #fff;
}

当通过 jquery 删除一行时，我最终得到两个相同颜色的后续行。有没有办法让桌子重新粉刷？

4

3 回答 3

10

.fadeOut() just hides the row (fades it to transparent then sets the display to none), but it doesn't really remove it. To do that use .remove():

$("tr").click(function(event) {
  event.preventDefault();
  $("#row_2").remove();
});

jsFiddle example

If removing the row isn't an option, you can filter the rows by those that are visible and those that aren't like:

$("#row_2").fadeOut(function () {
    $('tr:visible').filter(":odd").css('background', '#fff');
});
于 2013-09-06T19:53:48.243 回答
4

这是因为您实际上并没有删除该行，而只是隐藏了它。

如果您希望样式更新，您需要在fadeOut()完成后实际从 DOM 中删除该行。

根据您对隐藏行的实际操作，将其从 DOM 中移除可能不是一种选择——例如，如果您想稍后再将其切换回。

如果是这种情况，另一种解决方案可能是插入一个额外的隐藏行。这会使它重新进入奇/偶同步，而不会删除您隐藏的行。然后，您可以在重新显示隐藏行时再次删除多余的行。

于 2013-09-06T19:55:22.530 回答
0

如果您想为前端用户的快乐保持淡出的优雅，然后顺利移除，当然您可以使用回调移除链接淡出，如下所示：

<table class="myTable">
    <tr>
        <td>
            Bla bla :) I'm so striped <removebutton>Remove this row</removebutton>
        </td>
    </tr>
    <tr>
        <td>
            Bla bla :) I'm so striped  <removebutton>Remove this row</removebutton>
        </td>
    </tr>
    <tr>
        <td>
            Bla bla :) I'm so striped  <removebutton>Remove this row</removebutton>
        </td>
    </tr>
</table>

<script>
    jQuery('.myTable tr td removebutton').on('click', function() {
        jQuery(this).parent().parent().fadeOut(function() { 
            jQuery(this).remove();
       });
    });
</script>
<style>
    .myTable tr:nth-child(odd) {
        background-color: #EEEEEE; 
    }
</style>
于 2014-03-17T13:36:50.093 回答