Изменить цвет фона строки таблицы на основе части данных столбца

Question

Были варианты этого вопроса, но я не нашел объяснения, которое я хотел бы объяснить, к моему удовлетворению.Вот что у меня есть: у меня есть таблица, в которую динамически вводятся данные на основе учетных данных пользователя.Данные в таблице упорядочены по наличию (a) или (b) или (c) и т. Д. Перед полем ProductID, чтобы они были организованы вместе.Клиент хочет, чтобы цвет фона строк с (a) был, скажем, красным.Они хотят, чтобы строки с (b) были голубыми.(в) быть зеленым.Вы видите образец, я предполагаю.Мне нужно знать, как это сделать в 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 «содержит». Таким образом, он смотрит, что такое логин для компании, а затем просматривает строку таблицы с идентификатором 'table1 и определяет, есть ли совпадение для (A) или (B) или (C) и так далее. Если так, это дает ему цвет фона. Я добавил атрибут нижней границы, потому что строки срослись, когда они имели одинаковый цвет фона. Надеюсь, это поможет кому-то еще.

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