0

在 ajax 调用的成功函数中，我将行从 php 脚本检索到的数据中附加到表中。这是构建行的代码：

$.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 构造的最后一行中的错误关闭，或者更确切地说是未关闭tr的元素，/<tr>这会导致 jQuery 在每次迭代时创建一个新的空行。修复标记（更正为</tr>）将解决此问题。

参考：

于 2013-02-16T22:04:50.097 回答
0

您可以使用:nth-child 选择器来执行此操作，该选择器选择作为其父项的第 n 个子项的所有元素。检查表行是偶数还是奇数，并且它们应用正确的颜色

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