Question

在ajax调用的成功函数中，我将.ppend（）行从一个从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（）函数来构建行。

Answer 1

假设您不讨厌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元素，然后添加类。

顺便说一句，你需要在生成代码中使用函数，只是为了在维护或开发该脚本时保持自己的理智。

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

参考文献：

:nth-child() pseudo-class, W3.org。

Answer 2

您可以使用:nth-child Selector来选择所有父元素的第n个子元素。检查表格行是偶数还是奇数并且它们应用了正确的颜色

#tblMovieList tbody tr:nth-child(even) td {
    background-color: yourcolor;
}

无法在$ .ajax调用的成功函数中构建的表行上设置alt行颜色

2 个答案: