add different background color between odd and even when creating tr in each

Question

 var rowCount = 0;
 var trCount;

  // Set start each at second tr
  $('#list tr').each(function(index, tr) {
    // Count
    rowCount++;

    // Create tr
    trCount = $('<tr/>');

    // Create row number 1,2,3
    trCount.append("<td>" + rowCount + "</td>");

    // Append tr to display table
    tableContent.append(trCount);
  });

i am using the to create tr to my table , but my intention here is there will be different background-color between odd and even tr number , so how do i do this ?

something like this

$("tr:odd").css("background-color", "#E5E5E5");
$("tr:even:gt(0)").css("background-color", "#c7d4e5");

how do i append different back ground color when creating <tr>.

score 2 · Answer 1 · answered Feb 24 '17 at 16:18

2

You can do this in pure CSS and it will apply no matter how much javascript you throw at it.

tr:nth-of-type(even) {
    background-color:#E5E5E5;
}
tr:nth-of-type(odd) {
    background-color:#c7d4e5;
}

answered Feb 24 '17 at 16:18

ntgCleaner

5,865
9
48
86

1

@PatrickMoore, You probably won't agree with this, but w3s says otherwise: https://www.w3schools.com/cssref/sel_nth-of-type.asp – ntgCleaner Feb 24 '17 at 16:24
2

A better reference would perhaps be http://caniuse.com/#feat=css-sel3 – Heretic Monkey Feb 24 '17 at 16:31
Thanks @MikeMcCaughan, I tried looking at caniuse first, but I couldn't find the objects I was looking for. – ntgCleaner Feb 24 '17 at 16:37
@Andreas No problem :) – Heretic Monkey Feb 24 '17 at 16:46

add different background color between odd and even when creating tr in each

1 Answers1