KategorieProgramowanie

[JavaScript][jQuery] Jak pokolorować na przemian wiersze tabeli używając Java Script ?

Kolorowanie wierszy w tabelach stosuje się w celu zwiększenia przejrzystości danych, które te tabele reprezentują. Dobrą praktyką jest określanie kolorów wierszy w momencie generowania kodu html, jednak możliwe jest pokolorowanie tabelki z poziomu Java Script.

Zaczynamy od tabelki, na której będziemy pracować:

<table>
<tr>
    <th>Lp.</th>
    <th>Imie</th>
    <th>Nazwisko</th>
</tr>
<tr>
    <td>1.</td>
    <td>Ala</td>
    <td>Kowalska</td>
</tr>
<tr>
    <td>2.</td>
    <td>Franek</td>
    <td>Nowak</td>
</tr>

<tr>
    <td>3.</td>
    <td>Karolina</td>
    <td>Chudzik</td>
</tr>

<tr>
    <td>4.</td>
    <td>Grzegorz</td>
    <td>Krasnal</td>
</tr>
<tr>
    <td>5.</td>
    <td>Henryk</td>
    <td>Marciniak</td>
</tr>
</table>

Mając do dyspozycji taką tabelkę pokolorowanie wierszy będzie banalnie proste dzięki [b]jQuery[/b]:

<script type="text/javascript">

    $(document).ready(function(){

        $("tr:odd").css("background-color", "#bbbbff"); 
    });

</script>

Jak widać cały kod sprowadził się do jednej linijki, która znajduje w dokumencie wszystkie elementy tr. Następnie dzięki filtrowi [b]:odd[/b] zostały wybrane elementy nieparzyste, które są podrzędne w stosunku do elementu tr.

Pełne rozwiązanie

<script type="text/javascript" 
        src="jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $("tr:odd").css("background-color", "#bbbbff"); 
    });

</script>

<table>
<tr>
    <th>Lp.</th>
    <th>Imie</th>
    <th>Nazwisko</th>
</tr>
<tr>
    <td>1.</td>
    <td>Ala</td>
    <td>Kowalska</td>
</tr>
<tr>
    <td>2.</td>
    <td>Franek</td>
    <td>Nowak</td>
</tr>

<tr>
    <td>3.</td>
    <td>Karolina</td>
    <td>Chudzik</td>
</tr>

<tr>
    <td>4.</td>
    <td>Grzegorz</td>
    <td>Krasnal</td>
</tr>
<tr>
    <td>5.</td>
    <td>Henryk</td>
    <td>Marciniak</td>
</tr>
</table>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *