Wiersz tabeli - Podawanie alternatywnych kolorów

Question

W HTML, dynamicznie dodajemy wiersze do tabeli Potrzebuję podać różne kolory dla alternatywnych wierszy za pomocą CSS Jak mogę to osiągnąć?

Answer 1

Możesz także wypróbować bez CSS, jego prosty.

Kod:

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

tu swój tworząc dynamiczne rzędzie na stole i napełniania inny kolor coloumns.

nadzieję, że ta pomoc .. !! Dzięki

Answer 2

Po prostu utwórz 2 klasy css i przypisz je do tagów na przemian.

Answer 3

Aby uzyskać ten efekt (znany jako paski zebry) we wszystkich przeglądarkach przy użyciu samego CSS, musisz dodać klasę do każdego wiersza (np. Nieparzystego i parzystego) i nadać im różne kolory.

Jeśli chcesz osiągnąć to za pomocą samego CSS i nie jesteś zainteresowany obsługą starszych przeglądarek (IE6-8), powinieneś użyć pseudo elementu CSS3 nth-child. Może to osiągnąć wymagany efekt bez dodatkowej marży klasy, np.

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

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

Jednak jeśli chcesz pełną obsługę przeglądarki i nie przeszkadza przy użyciu javascript istnieje szereg skryptów dostępne obie wtyczki jQuery i zwykły stary JavaScript. Może spróbuj tego na początek?

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

Answer 4

Spróbuj przy użyciu jQuery:

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

See it in action here

Answer 5

Co używasz do tworzenia tabeli, jeśli jest on rails można użyć ?:

= cykl ("nieparzyste", "parzyste")

lub możesz to zrobić w PHP w ten sposób:

$ i = 0;

= ($ i ++% 2 == 1)? „Dziwne”: „nawet”

Answer 6

wystarczy utworzyć klasy CSS dla wierszy (nieparzyste i parzyste), ale nie zapominaj, że kolor czcionki dla tekstu powinny być readeable dotyczące koloru tła

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

Następnie w xhtml musisz ustawić klasę dla każdego rzędu. Na przykład, używając PHP podczas iteracji w wierszach, możesz ustawić wartość zmiennej $ class.

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

Dodatkowo, możesz zrobić inne klasy css dla każdej kolumny, w zależności od tego, co chcesz!