Forum PHP.pl > Kolorowanie Wierszy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

kicaj

26.08.2004, 16:00:26

Chcialbym zrobic kolorowanie wierszy w samym CSS/JS.
Zrobilem cos takiego, niesety nie dziala...

[HTML] pobierz, plaintext 
<script>
onload = function color()
{
    if( document.getElementById('wiersz').style.bgcolor == "#FF0000" )
    {
        document.getElementById('wiersz').style.bgcolor = "#0000FF";
    }
    else
    {
        document.getElementById('wiersz').style.bgcolor = "#FF0000";
    }
}
</script>
 
<table border="1">
 
<?php
 //$bgcolor = "#FF0000";
 
while( $row = mysql_fetch_array( $results ) )
{
    //if( $bgcolor == "#FF0000" ) // Przyklad w php, ale nie chce go stosowac
    //{
    //    $bgcolor = "#0000FF";
    //}
    //else
    //{
    //    $bgcolor = "#FF0000";
    //}
 
?>
 
 <tr>
  <td id="wiersz">dane...</td>
 </tr>
 
<?php
 }
 
?>
 
</table>
[HTML] pobierz, plaintext

Jak to zrobic? Da sie w ogole?

Vir

26.08.2004, 17:05:37

Hmm, dawno tu nie byłem

Czy chodzi o coś takiego:

Kod

<html>
<head>
<script type="text/javascript">

function set() {

var allTDs = document.getElementsByTagName('TD');

var onColor = '#FF8000';
var offColor = '#E7E7DF';

for ( var i=0; i<allTDs.length; i++ )

  {
    allTDs[i].onmouseover=function(){ this.style.backgroundColor = onColor; }
    allTDs[i].onmouseout=function(){ this.style.backgroundColor = offColor; }
    allTDs[i].className = "bg";
  }

}

</script>
<style type="text/css">
.bg
{
  background-color: #E7E7DF;
}
</style>
</head>

<body onload="set()">

<table>
<tr>
<td>Wiersz nr 1</td>
</tr>
<tr>
<td>Wiersz nr 1</td>
</tr>
</table>

</body>
</html>

Ps.
Możesz 'wzbogacić' kod o kolorowanie wierszy jedynie w ramach danego elementu SPAN dopisując getElementById..

np.

Kod

<html>
<head>
<script type="text/javascript">

function set() {

var allTDs = document.getElementById('test').getElementsByTagName('TD');

var onColor = '#FF8000';
var offColor = '#E7E7DF';

for ( var i=0; i<allTDs.length; i++ )

  {
    allTDs[i].onmouseover=function(){ this.style.backgroundColor = onColor; }
    allTDs[i].onmouseout=function(){ this.style.backgroundColor = offColor; }
    allTDs[i].className = "bg";
  }

}

</script>
<style type="text/css">
.bg
{
  background-color: #E7E7DF;
}
</style>
</head>

<body onload="set()">

<table>
<tr>
<td>Wiersz nr 1</td>
</tr>
<span id="test">
<tr>
<td>Wiersz nr 1</td>
</tr>
</span>
</table>

</body>
</html>

kicaj

26.08.2004, 17:40:52

Nie o to chodzilo...

Przez php/MySQL generuje liczbe wierszy, jak zrobic by byly na przemian pokolorowane?

Sposob w php znam, niestety chcialbym zrobic w CSS/JS

Vir

26.08.2004, 22:02:53

Cytat

jak zrobic by byly na przemian pokolorowane

W takim razie:

Kod

FiDO

26.08.2004, 22:45:32

Masz "maly" blad bo kolorujesz na przemian komorki a nie wiersze. Drugi blad (a moze to bylo zamierzenie?) to, ze Twoj kod zmieni kolor wszystkich komorek ze wszystkich tabel, co moze zaowocowac conajmniej dziwnym wygladem strony jesli do layoutu sa uzyte tabele.
Ja proponowalbym tak:

Kod

function koloruj(id)
{
var tab = document.getElementById(id);

for (i = 0; i < tab.rows.length; i++)
{
tab.rows[i].className = (i % 2)?'par':'odd';
}
}

Do tego

[HTML] pobierz, plaintext 
<body onload="koloruj('tablica');">
...
<table id="tablica" ...>
...
</table>
[HTML] pobierz, plaintext

PS. czemu chcesz kolorowac koniecznie przez JS a nie przez php, co byloby lepszym rozwiazaniem?

PS2. przenosze na Javascript

kicaj

26.08.2004, 23:10:56

Vir: Podobne rozwiazanie juz dostalem na webhelp.pl
Fido: Z tym ustaleniem dla ktorej tabeli to dobry sposob...

P.S. Dlaczego tutaj php byloby lepsze?

FiDO

27.08.2004, 00:37:48

Ano dlatego, ze uniezalezniasz sie wtedy od osoby przegladajacej strone. Nie kazdy musi miec wlaczone JS, ten kod moze nie dzialac na wszystkich przegladarkach, generalnie jest to mnie wiecej analogia do tematu sprawdzania poprawnosci forumularzy za pomoca JS czy php, z tym ze w tym przypadku przy uzyciu nie ucierpi bezpieczenstwo a jedynie wyglad.

AyZeL

5.04.2006, 14:19:19

Witam.

A jakbyscie rozwiazali problem kolorowania komorek w zaleznosci od atrybutu "name" ?

Zajec

5.04.2006, 19:58:03

Cytat(AyZeL @ 2006-04-05 14:19:19)

Witam.

A jakbyscie rozwiazali problem kolorowania komorek w zaleznosci od atrybutu "name" ?

Kod

td[name="raz"] { color: red; }
td[name="dwa"] { color: blue; }

AyZeL

5.04.2006, 22:04:57

No dziekuje, ale chodzilo mi raczej o rozwiazanie java, poniewaz dodalbym do tego jeszcze onmouseover i otrzymalbym pozadany efekt. W sumie to mam juz pomysl jak to wykonac, ale prosilbym jednak o podpowiedzi.

mike

5.04.2006, 22:49:25

Cytat(AyZeL @ 2006-04-05 22:04:57)

(...) poniewaz dodalbym do tego jeszcze onmouseover i otrzymalbym pozadany efekt.

Kod

td[name="raz"] { color: red; }
td[name="dwa"] { color: blue; }

td[name="raz"]:hover { color: #f00; } /*kolor po najechaniu*/
td[name="dwa"]:hover { color: #f00; } /*kolor po najechaniu*/

A po co pchać się z JavaScrpit'em tam gdzie go nie potrzeba?

TomASS

5.04.2006, 23:09:44

Majku, ale IE nie obsługuje 'hoverów' na coś innego niż <a>...... chyba, że się doda 'behaviora':

tutaj można o tym przeczytać oraz drobna uwaga.

AyZeL

5.04.2006, 23:19:21

Juz wytlumaczam czemu tak chce :]
Wiec moim pozadanym efektem bylo by podswietlanie dowolnych komorek tabeli po najechaniu na jadna z nich. Np. te komorki moga byc wstawione w znacznik <span> co wydaje mi sie najodpowiedniejsza droga rozwiazania tego problemu + uzycie funkcji getElementsByTagName.
Javascriptem zajmuje sie dopiero od 5 dni i jak narazie nie jestem w stanie rozwiazac tego sam.

=====================================================

Juz sobie poradzilem :]

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.