根据真假来改变表格列的颜色

我正在使用Javascript来从数据库填充我的表。 该表包含具有“真”和“假”文本的两列。 例如，名称或姓氏将填充为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');
}

---

使用jQuery，有几个选择：

1.使用过滤器

$('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.使用包含

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

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

JSFIDDLE DEMO

---

您可以更改数据绑定功能

function Table(data) {
    var table = '<table><tr><th>Name</th><th>Surname</th></tr>';
    var id= 0;          
    if(data[staff].Name=="true");
       var color="color:red;";
    else
       var color="color:green;";
    var row = '<tr class='staff-row'id='' + data[staff].ID+ ''</tr>';
    row += "<td style='"+color+"' >" + data[staff].Name+ '</td>';
    row += "<td style='"+color+"' >" + data[staff].Surname+ '</td>'

    id++;
    table += row;
    table += '</table></div>';
    $('#DisplayTable').html(table);
 }

---

创建表后，您可以对table进行操作。请尝试以下代码

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);
 $('#DisplayTable tr td').each(function() {

                                        if ($(this).html() == 'True') {
                                            $(this).addClass('success');

                                        }
                                        else if ($(this).html() == 'False') {
                                           $(this).addClass('danger');
                                        }

                                    });

}

链接地址: http://www.djcxy.com/p/31025.html

上一篇: change colour of table column based on true or false word

下一篇: jQuery change table cell text color based on text