Question

这个问题已经出现了变化，但我还没有找到我想要做的解释让我满意。这就是我所拥有的：我有一个表，根据用户的登录凭据动态输入数据。表格中的数据通过在ProductID字段前面加上（a）或（b）或（c）等来组织，以便将它们组织在一起。客户想要（a）行的背景颜色，比方说红色。他们希望（b）行是蓝色的。（c）是绿色的。我认为你看到了这种模式。我需要知道如何在JavaScript或jQuery中执行此操作，但我希望尽可能减少要使用的代码量。我也不擅长，但我可以使用示例代码并尝试获得正确的结果。有人可以帮忙吗？也许指出我正确的方向？

Answer 1

这是一个使用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/

Answer 2

这就是我实际工作的内容。它使用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");
}

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

2 个答案: