CODEWITHSUNDEEP
javascriptjqueryhtml-tablerowbackground-color
djlender
djlender

Reputation: 11

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

There have been variations of this question asked but I haven't found quite what I'm looking to do explained to my satisfaction. Here's what I've got: I have a table that has data dynamically input into it based on the log-in credentials of the user. The data in the table is organized by having a (a) or(b) or (c) etc. in front of the ProductID field so that they are organized together. The client wants the background color of the rows with the (a) to be, let's say red. They want the rows with (b) to be blue. (c) to be green. You see the pattern, I assume. I need to know how to do this in either JavaScript or jQuery but I want to minimize the amount of code to use, if possible. I'm not good with either but I can work with sample code and try to get the right results. Can anyone help? Maybe point me in the right direction?

Upvotes: 0

Views: 3687

Answers (2)

djlender
djlender

Reputation: 11

Here's what I actually got to work. It uses jQuery's 'contains'. So it looks to see what the login is for the company and then looks to the row of the table with the ID of 'table1 and sees if there is a match for (A) or (B) or (C) and so on. If so, it gives it the background color. I added the bottom-border attribute because the rows ran together when they had the same background color. Hope this helps someone else.

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

Upvotes: 0

Minko Gechev
Minko Gechev

Reputation: 25682

Here is a sample solution with 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);
    }
});

With table:

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

In this code firstly you're getting all rows into rows variable. After that you're getting every cell in the current row ($(rows[i])) into cells array. After that lets assume that the column on which depends the row background color is the first one. Then we're checking it's value ($(cells[0]).text()) into the switch and after that painting the current row. Hope that that helps.

//The result here: http://jsfiddle.net/cEY7K/6/

Upvotes: 2

Related Questions