3

ここで問題を示す jsfiddle があります: http://jsfiddle.net/xjmwY/

基本的に、nth-child(odd) ルールを使用した css3 ゼブラ ストライプ テーブルがあります。

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

行が jquery を介して削除されると、同じ色の 2 つの後続の行が作成されます。テーブルを再描画する方法はありますか?

4

3 に答える 3

10

.fadeOut()行を非表示にするだけです（透明にフェードしてから表示をなしに設定します）が、実際には削除しません。その使用を行うには.remove()：

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

jsFiddle の例

行を削除できない場合は、表示されている行とそうでない行で行をフィルター処理できます。

$("#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 に答える