color coding table after checking conditions from an array

Question

I am trying to color code a td after checking certain condition from an array. Everything works fine except this piece. Here is what I have

<table border="0" cellpadding="0" cellspacing="0">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Profession</th>
    <th>Code</th>
</table>

var html = "";

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType"></td><tr>';

    if (this.type === 'red') {
        $('.colorType').css('background', 'red')
    }
    else if (this.type === 'blue') {
        $('.colorType').css('background', 'blue')
    } else {
        $('.colorType').css('background', 'white')
    }
});

$('table').append(html);

Here is my fiddle http://jsfiddle.net/sghoush1/J2ssK/9/

Please enclose your TH tags within TR tags.

kristinalim
– kristinalim

2013-09-27 02:11:42 +00:00
Commented Sep 27, 2013 at 2:11 — kristinalim
– kristinalim, Commented Sep 27, 2013 at 2:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

How about this?

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';    
    html += '<td style="background-color:' + this.type + '"></td><tr>';
});

Updated fiddle

Your problem was you were referencing a dom element, .colorType, before it was appended to the dom.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 27, 2013 at 2:08

Chris Montgomery

2,3642 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ken Herbert · Accepted Answer · 2013-09-27 02:05:46Z

1

That is because your if() statements around the colour are running before the html has been appended to the table, so the elements don't exist when you are trying to change their colour.

Instead you could add the style inline inside of the loop like this:

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType" style="background:';

    if (this.type === 'red') {
       html += 'red';
    }
    else if (this.type === 'blue') {
       html += 'blue';
    } else {
       html += 'white';
    }
    html += ';"></td><tr>';
});

Here is the updated jsFiddle.

answered Sep 27, 2013 at 2:05

Ken Herbert

5,2465 gold badges31 silver badges38 bronze badges

3 Comments

soum Over a year ago

@ winterblood--This was good until I found out I dont really have to use the if. Concatenation is painful. I was making mistakes and I had to copy paste your code to avoid missing characters. But really it cleared my concept very well. thanks for doing this

Ken Herbert Over a year ago

While I could have modified the code to use the more elegant approaches shown by the other answers I did it that way specifically so if you had colours that did not translate directly to HTML colour names it would be easier to handle eg. if(type ==='olive drab') { html += 'olivedrab';} else if(type ==='off-white') { html += '#FFFAFA';}. If the extra handling isn't needed I definitely recommend one of the other approaches. The if()s could also be replaced with a switch() statement for a more elegant and compact but still broad approach.

soum Over a year ago

@winterblood-- thanks again..in this context I can get away with using the smaller solution since this is more or less like a prototype where I am printing out the colors as a type in the array but in the ideal world that wont happen. There would be some other arbitrary value so in that case your solution is the best solution. Really the way you approached it cleared my concept very well

Barmar · Accepted Answer · 2013-09-27 02:06:22Z

1

Calling $(".colortype").css(...) sets the background of all the matching elements that are already in the DOM. It doesn't do anything to the HTML string that you're in the process of building. You need to put something in the HTML that gives the TDs an appropriate style. Here I've used different classes to represent the different color backgrounds.

Add this CSS:

.redBG {
    background-color: red;
}
.blueBG {
    background-color: blue;
}
.whiteBG {
    background-color: white;
}

and change the JS to:

$.each(arrayTest, function () {
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="' + this.type +'BG"></td><tr>';
});

FIDDLE

answered Sep 27, 2013 at 2:06

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

soum Over a year ago

@Barmar--this is very clever

Hugo Tostes · Accepted Answer · 2013-09-27 02:10:12Z

-1

the code not work because you only can manipulate the 'td' with jquery, afer the append method

so try this:

$.each(arrayTest, function (i) {
    html = ""; //clean up the variable
    html += '<tr><td>' + this.firstName + '</td>';
    html += '<td>' + this.lastName + '</td>';
    html += '<td>' + this.profession + '</td>';
    html += '<td class="colorType_'+i+'"></td><tr>'; //put the i count, because the class cannot be duplicated

    $('table').append(html);

    if (this.type === 'red') {
        $('.colorType'+i ).css('background', 'red')
    }
    else if (this.type === 'blue') {
        $('.colorType'+i ).css('background', 'blue')
    } else {
        $('.colorType'+i ).css('background', 'white')
    }
});

answered Sep 27, 2013 at 2:10

Hugo Tostes

4124 silver badges13 bronze badges

2 Comments

Ken Herbert Over a year ago

Using .append() in a loop like this is not recommended as it is slower than appending everything at once, especially as the amount of data being processed increases.

Hugo Tostes Over a year ago

@winterblood, you're right, im always put the concatenation first. but, I thought he wanted put one line per loop. sorry.

Collectives™ on Stack Overflow

color coding table after checking conditions from an array

4 Answers 4

Comments

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related