Row table - providing alternative colors

Question

In HTML, I dynamically add rows to a table. I need to give different colors for alternate rows using CSS. How can I understand this?

Answer 1

You can also try without CSS, simply.

the code:

    **var rowCount = document.getElementById("tableID").rows.length;
    var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        cell1.style.backgroundColor = "yellow";
                    cell1.innerHTML = "hey";
                    var cell2 = row.insertCell(1);
        cell2.style.backgroundColor = "green";
                    cell2.innerHTML = "hello";**

Here he creates a dynamic row for the table and fills a different color for coloumns.

hope this help .. !! Thanks

Answer 2

To achieve this effect (known as the zebra stripe) in all browsers using only CSS, you need to add a class to each line (for example, odd and even) and give them different colors.

CSS (IE6-8), - nth-child CSS3. , .

tr:nth-child(odd) {
  background-color: #FF0;
}

tr:nth-child(even) {
  background-color: #F0F;
}

, , javascript, , jQuery, javascript. , ?

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

Answer 3

2 css .

Answer 4

JQuery:

$('tr:even').css('background-color', 'grey');

Answer 5

, , ?:

= ('', '')

PHP :

$i = 0;

= ($ ++% 2 == 1)? 'odd': 'even'

Answer 6

just create css classes for strings (odd and even), but don't forget that the font color for the text should be transparent relative to the background color

.row_odd{
    background: #ffffff;
    color: #000;
}
.row_even{
        background: #faf8f5;
        color: #000;
}

Then in xhtml you need to set a class for each line. For example, using php when you iterate through the lines, you can set the value of the variable $ class .

<tr class="<?=$class?>" onmouseover=""> 
   <td class="center col_check">...</td>
   <td class="links">...</td>  
   <td class="center">...</td>
</tr>

In addition, you can make other CSS classes for each column depend on what you want!