javascript - 表格的 CSS jQuery 着色的重叠条件

Question

我想我已经把自己逼到了一个 Angular 落。我有一个客户元素，我正在跟踪从一个域到另一个域的系统迁移状态。我创建的工具有一个网页实用程序，人们可以使用它来跟踪迁移。我目前有点困惑，试图找出我的 CSS 中哪里出错了。

我的工具将导出一个 HTML 文件，其中包含一些条件:

• 如果迁移状态等于 Needs Attention，将该行标记为红色，与任何其他条件重叠
• 如果迁移状态等于已迁移，则将该行涂成绿色，与任何其他条件重叠
• 如果迁移状态等于 ReadyForMigration，则将该行涂成黄色

因此，出于某种原因，我的 jquery $(this) 选择器似乎不适用于一行中的第一个单元格，但可以用于行中的其他单元格。

知道为什么只有这些细胞中的一些接受了它们的着色吗？

Fiddler 链接:http://jsfiddle.net/6zjggL9j/4/

j查询

$('tbody tr td:not(":first")').each(

function() {
var cell = $(this).text();



if (cell == 'Not Online') {
    $(this).closest('tr').addClass('NotOnline')
}


else if (cell == 'Migrated') {
    $(this).addClass('good');
    $(this).closest('tr').addClass('good')
}

else if (cell == 'ReadyForMigration') {
    $(this).addClass('Available');
    $(this).closest('tr').addClass('Available')
}

else if (cell == 'Available') {
    $(this).addClass('Available');
    $(this).closest('tr').addClass('Available')
}

});

CSS

table {
    width: 20em;
}

th {
    border-bottom: 2px solid #000;
    padding: 0.5em 2em 0.1em 0;
    font-size: 1.2em;
}

td {
    border-bottom: 2px solid #ccc;
    padding: 0.5em 0 0.1em 0;
}

.vGood {
    background-color: #0f0;
}

.Online {
    background-color: #0f0;
}
.good {
    background-color: #0c0;
}

.avg {
    background-color: #060;
}

.poor {
    background-color: #c00;
}

.vPoor {
    background-color: #f00;
}

.Migrated{}

.Online{
background-color: #fd0;
    }

.NotOnline {
  background-color: #a44   
}

.Available{
  background-color: #dca
}
}

html

<table id="my_table">
<colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>
<thead>
<tr><th>MigrationStatus</th><th>User</th><th>ComputerName</th><th>Location</th><th>Ipv4</th><th>Domain</th><th>Online</th></tr>
</thead>
<tr><td>ReadyForMigration</td><td>NA</td><td>5101TEST-LI</td><td>##</td><td>10.24.130.74</td><td>Source</td><td>Available</td></tr>
<tr><td>Needs Attention</td><td>NA</td><td>ABBON-L2</td><td>##</td><td>??</td><td>Access Denied</td><td>Not Online</td></tr>
<tr><td>Needs Attention</td><td>NA</td><td>ABBON-L7</td><td>##</td><td>??</td><td>Access Denied</td><td>Not Online</td></tr>
<tr><td>Needs Attention</td><td>NA</td><td>ACCTGTEMP-L</td><td>##</td><td>??</td><td>Access Denied</td><td>Not Online</td></tr>
<tr><td>Migrated</td><td>NA</td><td>ADAMSL-D</td><td>##</td><td>??</td><td>Corp</td><td>Not Online</td></tr>
<tr><td>Migrated</td><td>NA</td><td>AGRUSSA-LI</td><td>##</td><td>??</td><td>Corp</td><td>Online</td></tr>
<tr><td>ReadyForMigration</td><td>NA</td><td>HamsterMan</td><td>##</td><td>??</td><td>Source</td><td> Online</td></tr>
</table>

如果这与我遇到的上一个问题有任何相似之处，那是我犯了一个愚蠢的错误，您很快就会知道原因。提前致谢

Answer 1

是的，您正在尝试以所有 td 为目标，但只需要以 tr 为目标

http://jsfiddle.net/6zjggL9j/5/

修改代码

else if (cell == 'Migrated') {
    $(this).closest('tr').addClass('good')
}

删除 td 类添加。对所有情况都这样做。

编辑 是的，我忽略了删除类的事情。您应该删除所有其他类，然后添加您想要的类。这将是最佳实践..