7

ブラウザのものなのかCSS3のものなのかわからないという問題が少しあります。

標準のHTMLテーブルを使用するデータグリッドがあります。

<table>
    <thead>
        ...
    </thead>
    <tbody>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr class="found">
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

TD要素のコンテンツを検索するjQuery関数があります。見つかった場合は、見つかったクラスを維持します。見つからない場合は、見つかったクラスを削除し、見つからないクラスを追加します。当然、見つからない場合は表示を設定するだけです：なし

そのため、検索機能は私が望むように機能しています。クラスは適切に割り当てられています。ただし、CSS疑似セレクターを使用して、代替行にスタイルを適用しています。

tr.found:nth-child(even) {
    background: #fff;
}
tr.found:nth-child(odd) {
    background: #000;
}

これは、検索が行われる前にうまく機能します。ただし、検索と見つからないクラスが適用された後、疑似セレクターは要素とクラスではなく、要素にのみ適用されるように見えます。それ、または疑似セレクターはページの読み込み中に適用され、その時点では静的なままになります。

jQuery検索を実行して、特定の偶数クラスと奇数クラスを再割り当てすることはできますが、それは面倒になります。それほど大したことではありませんが、私の列ヘッダーは並べ替え可能であるため、そのイベントにクラスを再適用する必要があります。また、私が行っていることを実行するには、非効率的なメソッドを作成する必要があります。データサンプルが大きくなりすぎると、クラスの変更を繰り返し確認できる可能性があります。これは、私が避けようとしていることです。

これに対する解決策はありますか？

編集

リクエストに応じて、私はJSFiddleをセットアップして、天才がそれをおもちゃにできるようにします：http: //jsfiddle.net/bDePR/

大統領または秘書を検索すると、行動が発生します。

4

1 に答える 1

1

これは私が思いついた最も簡単な方法です。jQuery：visibleセレクターを使用してすべての表示可能なtr要素を検索し（並べ替えた後）、CSSを交互の要素に適用します。

// reset the background
$j('tr').css('background', '#ccc');
$j('tr:visible').each(function(i){
    if((i % 2) == 0) {
        // apply background to every other one
        $j(this).css('background', 'yellow');
    }
});

例：http： //jsfiddle.net/bDePR/1/

編集：

これは、@ amustillによって同じことを行いますが、より効率的/簡潔です

// reset the background
$j('tr').css('background', '#ccc');
$j('.found').filter(':odd').css({ background: 'yellow' });
于 2012-10-09T19:37:25.983 に答える