javascript - 根据 true 或 false word 更改表列的颜色

Question

我正在使用 Javascript 从数据库中填充我的表。该表包含两列，分别包含“True”和“False”文本。例如，姓名或姓氏将填充为 True 或 False。因此，当检测到“真”字时，该列应为绿色，否则为红色 (False)。为此，我使用了 Twitter Bootstrap 颜色。这就是我所做的:

<div class="table-responsive">
    <table class="table table-bordered table-hover table-condensed">
        <tbody>
            <tr class="success">
                <td>True</td>
            </tr>
            <tr class="danger">
                <td>False</td>
            </tr>
        </tbody>
    </table>
</div>

这就是我构建表格的方式:

function Table(data) {
    var table = '<table><tr><th>Name</th><th>Surname</th></tr>';
    var id= 0;          
    var row = '<tr class=\'staff-row\'id=\'' + data[staff].ID+ '\'</tr>';
    row += '<td>' + data[staff].Name+ '</td>';
    row += '<td>' + data[staff].Surname+ '</td>'

    id++;
    table += row;
    table += '</table></div>';
    $('#DisplayTable').html(table);
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
}

Answer 1

使用 jQuery，有几个选项:

1. Using Filters

$('td').filter(function() {
    return $(this).text().indexOf('True') === 0;
}).closest('tr').addClass('success');

$('td').filter(function() {
    return $(this).text().indexOf('False') === 0;
}).closest('tr').addClass('danger');

JSFIDDLE DEMO

---

2. Using Contains

$('tr:has(td:contains("True"))').addClass('success');

$('tr:has(td:contains("False"))').addClass('danger');

JSFIDDLE DEMO