Archiwum tagu: zmiana koloru tła komórki

Jak zmienić kolor komórki w tabeli po najechaniu na nią?

Na niektórych stronach internetowych można zauważyć bardzo ciekawy efekt, a mianowicie zmianę koloru tła komórki po najechaniu na nią kursorem myszy. W sumie, jest to efekt bardzo łatwy do uzyskania. Zapraszam poniżej.

Pierwszym krokiem jest stworzenie klasy w szablonie CSS z ustawieniem koloru tła. Nie jest to jednak konieczne, ale będzie o wiele wygodniejsze niż ustawianie stylu dla każdego wiersza. Więc, definiujemy styl w taki sposób, aby ustawiać kolor tła dla każdej komórki w wierszu.

<style type="text/css">
tr.highlight td {
    background-color: red;
}
</style>

Teraz stworzymy skrypt jQuery, który ma za zadanie dodanie klasy .highlight do wiersza po najechaniu myszką na dany wiersz.

<script type="text/javascript">
$(document).ready(function(){
    $("#tabelka tr").hover(function() {
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    });
});
</script>

Mając styl i skrypt możemy napisać działający przykład. Oto on:

<style type="text/css">
    table.list {
        width: 100%;
    }
    table.list th {
        background-color:teal;
        color:#fff;
    }
    tr.highlight td {
        background-color: red;
    }
</style>
<script type="text/javascript" src="jQuery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#tabelka tr").hover(function() {
            $(this).addClass("highlight");
        }, function() {
            $(this).removeClass("highlight");
        });
    });
</script>
<table id="tabelka" cellspacing="1" class="list">
<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>

Myślę, że wyszło ciekawie :) a do tego możesz dowolnie modyfikować powyższy przykład uzyskując jeszcze lepsze efekty w kolorowaniu innych elementów strony.

źródło: porady-it.pl