0

ie8で機能するため、jQueryを使用してテーブルをゼブラストライプします。

$('table.data tr:nth-child(odd)').css('background-color', '#ececec');

問題は、行を削除できるボタンがあることです。

$(this).parents('tr').remove();

これにより、ゼブラの縞模様が失われます。だから私は試しました：

$(this).parents('tr').remove();
$('table.data tr:nth-child(odd)').css('background-color', '#ececec');
$('table.data tr:nth-child(even)').css('background-color', '#ffffff');

と

$(this).parents('tr').remove();
$('table.data tr').css('background-color', '#ffffff');
$('table.data tr:nth-child(odd)').css('background-color', '#ececec');

どちらも機能しません。.remove()コールバック関数がないか、ゼブラ ストライプを入れます。何か案は？

編集 - 上記のコードは機能しますが、css の競合がありました。（以下の回答を参照）。ただし、競合は背景色を設定しません。そのため、ルールが競合を引き起こす理由を知りたいと思います。

4

3 に答える 3

1

.remove同期であるため、コールバックは必要ありません。クラスから離れて.css使用することをお勧めします。そうすれば、クラスを単純に削除してから、奇数行に追加し直すことができます。

最初のストライピングを行うには:

$('table.data tr:nth-child(odd)').addClass('odd');

そして、削除時に：

$(this).parents('tr').remove();
$('table.data tr').removeClass('odd').filter(':nth-child(odd)').addClass('odd');
于 2013-03-29T21:01:58.967 に答える
1

かなり最新のブラウザー (IE 9 以降) をターゲットにしている場合は、CSS3 スタイルシートを使用してこれらすべてを処理できます。

スタイル.css:

table.data tr:nth-child(odd)
{
    background-color: #ececec;
}
table.data tr:nth-child(even)
{
    background-color: #ffffff;
}

JavaScript は必要ありません。これらのルールはブラウザによって適用され、DOM が変更されると自動的に再適用されます。

于 2013-03-29T21:06:42.030 に答える
0

問題が見つかりました。

私の質問のコードは機能しますが、css の競合がありました。奇妙なことに、競合の原因となった css ルールが設定されていませんbackground-color

table.headerShadow tr:nth-child(2) {
    background-image:url(../_images/faux-shadow.png);
    background-repeat:repeat-x;
}

ルールを削除すると、問題が修正されます。変ですよね？なぜそのルールが競合を引き起こすのでしょうか?

ここに実証するフィドルがあります：http://jsfiddle.net/W7yZC/2/

于 2013-03-29T21:20:56.420 に答える