Question

我正在使用Javascript从数据库填充我的表。该表包含两列具有“True”和“False”文本的列。例如，姓名或姓氏将填充为True或False。因此，当检测到“True”字时，该列应使用带有红色的绿色其他（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

Answer 2

您可以更改数据绑定功能

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);
 }

Answer 3

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

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');
                                        }

                                    });

}

Answer 4

这肯定会解决你的问题..

$(document).ready(function() {
    var listItems = $(".table tr td");
    listItems.each(function(idx, li) {
        if ($(this).text() == 'True') {
            $(this).css('background','green');
        } else if ($(this).text() == 'False') {
            $(this).css('background','red');
        }
    });
});

http://jsfiddle.net/Yunus_Aslam/5Z3B9/1/

根据真或假单词更改表列的颜色

4 个答案: