根据部分列数据更改表行的背景颜色

Change background color of table row based of part of column data

本文关键字：背景 颜色 数据      更新时间：2023-09-26

这个问题已经问过很多次了，但我还没有找到让我满意的解释。下面是我得到的:我有一个表，其中根据用户的登录凭据动态地输入数据。表中的数据通过在ProductID字段前面放置(a)或(b)或(c)等来组织，以便将它们组织在一起。客户端希望带有(a)的行的背景颜色为红色。题目想让(b)的行是蓝色的。(c)绿色。我想你们已经看到规律了。我需要知道如何在JavaScript或jQuery中做到这一点，但我想尽量减少使用的代码量，如果可能的话。我不是很好，但我可以与样例代码工作，并试图得到正确的结果。有人能帮忙吗?也许能给我指个方向?

下面是一个使用jQuery的示例解决方案。

$(document).ready(function () {
    var table = $('#foo'),
        rows = table.find('tr'), cells, background, code;        
    for (var i = 0; i < rows.length; i+=1) {
        cells = $(rows[i]).children('td');
        code = $(cells[0]).text().substr(0, 3);        
        switch (code) {
            case '(A)':
                background = '#e29e6e';
                break;
            case '(B)':
                background = '#f9cf80';
                break;
            case '(C)':
                background = '#ffe8c0';
                break;
            default:
                background = '#95704e';
        }
        $(rows[i]).css('background-color', background);
    }
});
与表:

<table id="foo">
    <tr>
        <td>(A) 10x12 Blue Bag</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(A) 15x12 Red Bag</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(B) 10x12 T-shirt</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(A) 10x12 Yellow Bag</td>
        <td>Val</td>
    </tr>
    <tr>
        <td>(C) 10x12 Shoes</td>
        <td>Val</td>
    </tr>
</table>

在此代码中，首先将所有行放入rows变量。之后，您将获得当前行($(rows[i]))中的每个单元格进入单元格数组。之后，让我们假设依赖于行背景颜色的列是第一个。然后我们检查它的值($(cells[0]).text())进入开关，然后绘制当前行。希望这对你有帮助。

//结果:http://jsfiddle.net/cEY7K/6/

这是我实际要做的。它使用jQuery的"contains"。因此，它查看公司的登录名是什么，然后查看ID为'table1 '的表行，并查看是否有(a)或(B)或(C)的匹配，等等。如果是，它会给它一个背景色。我添加了bottom-border属性，因为当这些行具有相同的背景颜色时，它们会一起运行。希望这能帮助到其他人。

var tempCustomerName;
var CustomerName;   
tempCustomerName = document.getElementById("CustomerName").innerHTML;
CustomerName = tempCustomerName;
if (CustomerName.indexOf('Test Company') != -1) {
$("#table1 tr td").css("border-bottom", "1px solid #000 !important");
$("#table1 tr:contains('(A)')").css("background", "#66CC99");
$("#table1 tr:contains('(B)')").css("background", "#FFCC33");
$("#table1 tr:contains('(C)')").css("background", "#FFFF33");
$("#table1 tr:contains('(D)')").css("background", "#9999FF");
$("#table1 tr:contains('(E)')").css("background", "#3399FF");
$("#table1 tr:contains('(F)')").css("background", "#FF3333");
$("#table1 tr:contains('(G)')").css("background", "#FF9900");
$("#table1 tr:contains('(H)')").css("background", "#66CC99");
$("#table1 tr:contains('(I)')").css("background", "#FFCC33");
$("#table1 tr:contains('(J)')").css("background", "#FFFF33");
$("#table1 tr:contains('(K)')").css("background", "#9999FF");
$("#table1 tr:contains('(L)')").css("background", "#3399FF");
$("#table1 tr:contains('(M)')").css("background", "#FF3333");
$("#table1 tr:contains('(N)')").css("background", "#FF9900");
$("#table1 tr:contains('(O)')").css("background", "#66CC99");
$("#table1 tr:contains('(P)')").css("background", "#FFCC33");
$("#table1 tr:contains('(Q)')").css("background", "#FFFF33");
$("#table1 tr:contains('(R)')").css("background", "#9999FF");
$("#table1 tr:contains('(S)')").css("background", "#3399FF");
$("#table1 tr:contains('(T)')").css("background", "#FF3333");
$("#table1 tr:contains('(U)')").css("background", "#FF9900");
$("#table1 tr:contains('(V)')").css("background", "#66CC99");
$("#table1 tr:contains('(W)')").css("background", "#FFCC33");
$("#table1 tr:contains('(X)')").css("background", "#FFFF33");
$("#table1 tr:contains('(Y)')").css("background", "#9999FF");
$("#table1 tr:contains('(Z)')").css("background", "#3399FF");
}
相关文章：