0

ajax 呼び出しの成功関数では、php スクリプトから取得したデータからテーブルに行を .append()ing しています。行を構築するコードは次のとおりです。

$.each(data, function(index,element) {
    $('table#tblMovieList tbody').delay(200).append('<tr class="viewMovieRow">' +
        '<td class="listEditMovie">' +
            '<a class="linkEditMovie" name="' + element['movieID'] + '" href="#">Edit</a>' +
        '</td>' +
        '<td class="listDeleteMovie">' +
            '<input type="checkbox" class="chkDeleteMovie" name="deleteMovies[]" value="' + element['movieID'] + '" />' +
        '</td>' +
        '<td class="listMovieTitle">' +
            element['title'] +
        '</td>' +
        '<td class="listMovieDirector">' +
             ((element['directorFirstName'] === null) ? '' : element['directorFirstName']) + ' ' + ((element['directorLastName'] === null) ? '' : element['directorLastName']) +
        '</td>' +
        '<td class="listMovieLength">' +
            ((element['runTime'] === '0') ? '' : element['runTime']) +
        '</td>' +
        '<td class="listMovieMpaaRating">' +
            ((element['mpaaRating'] === null) ? '' : element['mpaaRating']) +
        '</td>' +
        '<td class="listMovieYearReleased">' +
            ((element['yearReleased'] ===  '0') ? '' : element['yearReleased']) +
        '</td>' +
        '<td class="listMovieSynopsis">' +
            element['synopsis'] +
        '</td>' +
        '<td class="listMovieFormat">' +
            ((element['format'] === null) ? '' : element['format']) +
        '</td>' +
        '<td class="listMovieReleaseStatus">' +
            ((element['releaseStatus'] === null) ? '' : element['releaseStatus']) +
        '</td>' +
        '<td class="listMovieMyRating">' +
            ((element['myRating'] === null) ? '' : element['myRating']) +
        '</td>' +
    '/<tr>');
});

次に、この行を使用して、テーブルの偶数行に色を付けようとしています。

$("#tblMovieList tbody tr:even").addClass("alt");

その行を .each() 関数の直後に置くと、すべての tbody 行に色が付けられます。行をjs ファイルの他の場所に配置すると、どの行も色付けされません。

何か不足していますか？行が動的に構築されるため、これを行う必要がある別の方法はありますか? jsFiddle を作成しましたが、.each() 関数を使用して反復処理をシミュレートして行を構築する方法がわかりませんでした。

4

2 に答える 2

2

あなたが CSS を嫌いではなく、ユーザーがそれに準拠したブラウザーを使用していると仮定します。

#tblMovieList tbody tr:nth-child(even) td {
    background-color: red; /* or whatever */
}

そして、私はこれを試していませんが、次のように動作するはずです:

$('table#tblMovieList tbody')
    .delay(200)
    .append(/* all that table-generating code */)
    .find('tr:even').addClass('alt');

メソッドは、新しく追加された要素ではなく、コンテンツが追加された要素/ノードを返すため、これは機能するはずです。したがって、新しい要素を追加し、追加したら要素を探してクラスを追加する必要があります。append()tr:even

また、ついでに言えば、そのスクリプトを保守または開発するときに自分の正気を保つためだけに、その生成コードで関数を使用する必要があります。

または、問題は、HTML 構造の最終行にある誤って閉じられた、または閉じられていない要素である可能性があります。これにより、 jQueryは反復ごとに新しい空の行を作成します。マークアップを修正する (に修正する) と、この問題は解決します。tr/<tr></tr>

参考文献:

于 2013-02-16T22:04:50.097 に答える
0

親の n 番目の子であるすべての要素を選択する:nth-child セレクターを使用してこれを行うことができます。テーブルの行が偶数か奇数かを確認し、適切な色を適用します。

#tblMovieList tbody tr:nth-child(even) td {
    background-color: yourcolor;
}
于 2013-02-16T22:06:50.537 に答える