change colour of table column based on true or false word

I am using Javascript to populate my table from a database. The table contains two columns that have 'True' and 'False' text. For example Name or Surname will be populated as True or False . So when 'True' word is detected, that column should be colored with green else with red ( False ). To do this I am using Twitter Bootstrap colors. This is what I have done:

<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>

This is how I built my 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);
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
}

---

Using jQuery, there are a few options:

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

---

您可以更改数据绑定功能

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/31026.html

上一篇: yii2：jquery如果gridview列包含特定的值而不是改变颜色

下一篇: 根据真假来改变表格列的颜色