錶行 - 給替代顏色

Question

在HTML中，我在表中動態添加行 我需要爲使用CSS的替代行提供不同的顏色 我該如何實現這一目標？

Answer 1

你也可以嘗試沒有CSS，其簡單。

代碼：

**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";** 

這裏創建它的動態排爲表和填充不同的顏色coloumns。

希望這有助於.. !! 謝謝

Answer 2

只需創建2個CSS類，並將它們交替分配給標籤。

Answer 3

爲了在所有使用CSS的瀏覽器中實現這種效果（稱爲斑馬條紋），您需要爲每一行添加一個類（例如奇數和偶數）併爲它們賦予不同的顏色。

如果你想用CSS實現這一點，並且不關心支持舊瀏覽器（IE6-8），你應該使用CSS3 第n個孩子僞元素。這可以在沒有額外的類別標記的情況下實現所需的效果，例如，

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

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

但是如果你想要完整的瀏覽器支持，不介意有許多可用的腳本，既jQuery插件和普通的老JavaScript的使用JavaScript。也許嘗試這對初學者？什麼是你用來創建表

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

See it in action here

Answer 4

試試這個使用JQuery （'奇'，'偶'）

或者你可以在PHP像這樣：

$ i = 0;

=（$ i ++％2 == 1）？ 「奇」：「偶」

Answer 5

，如果導軌可以使用？：

=循環：

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

Answer 6

剛剛創建的行CSS類（奇數和偶數），但不要忘了，字體顏色的文本應有關的背景顏色是readeable

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

然後在XHTML你必須爲每一行設置類。例如，在迭代行時使用php，您可以設置變量的值$ class。

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

此外，你可以讓每個列的其他CSS類取決於你想要的！