0

在检查数组中的某些条件后，我试图对 td 进行颜色编码。除了这件作品外，一切都很好。这是我所拥有的

<table border="0" cellpadding="0" cellspacing="0">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Profession</th>
    <th>Code</th>
</table>

var html = "";

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType"></td><tr>';

    if (this.type === 'red') {
        $('.colorType').css('background', 'red')
    }
    else if (this.type === 'blue') {
        $('.colorType').css('background', 'blue')
    } else {
        $('.colorType').css('background', 'white')
    }
});

$('table').append(html);

这是我的小提琴 http://jsfiddle.net/sghoush1/J2ssK/9/

4

4 回答 4

3

这个怎么样？

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';    
    html += '<td style="background-color:' + this.type + '"></td><tr>';
});

更新的小提琴

您的问题是您在将 dom 元素附加到 dom 之前引用了它.colorType。

于 2013-09-27T02:08:33.010 回答
1

这是因为if()在将 html 附加到表格之前，您围绕颜色的语句正在运行，因此当您尝试更改其颜色时，这些元素不存在。

相反，您可以像这样在循环内添加样式内联：

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType" style="background:';

    if (this.type === 'red') {
       html += 'red';
    }
    else if (this.type === 'blue') {
       html += 'blue';
    } else {
       html += 'white';
    }
    html += ';"></td><tr>';
});

这是更新的 jsFiddle。

于 2013-09-27T02:05:46.847 回答
1

调用$(".colortype").css(...)设置 DOM 中已经存在的所有匹配元素的背景。它不会对您正在构建的 HTML 字符串做任何事情。您需要在 HTML 中添加一些内容，为 TD 提供适当的样式。在这里，我使用了不同的类来表示不同的颜色背景。

添加这个CSS：

.redBG {
    background-color: red;
}
.blueBG {
    background-color: blue;
}
.whiteBG {
    background-color: white;
}

并将JS更改为：

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="' + this.type +'BG"></td><tr>';
});

小提琴

于 2013-09-27T02:06:22.607 回答
-1

该代码不起作用，因为您只能在 append 方法之后使用 jquery 操作“td”

所以试试这个：

$.each(arrayTest, function (i) {
    html = ""; //clean up the variable
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType_'+i+'"></td><tr>'; //put the i count, because the class cannot be duplicated

    $('table').append(html);

    if (this.type === 'red') {
        $('.colorType'+i ).css('background', 'red')
    }
    else if (this.type === 'blue') {
        $('.colorType'+i ).css('background', 'blue')
    } else {
        $('.colorType'+i ).css('background', 'white')
    }
});
于 2013-09-27T02:10:12.200 回答