Tabulas katru otro rindu iekrāsot

[Sasa]

Esmu redzējis tādas tabulas kur katra otrā rinda ir citā krāsa un vēl iekš FF ir tā ka ar peli braukājot pa rindām tās vēl savādāk pārkrāsojas. Kā man kaut ko līdzīgu sataisīt savai tabulai?

[Evi]

tr.zils { background:blue }

 

tr:hover { background:blue } // shis tev uztaisiis zilu bg, kad brauksi ar peli paari tabulas rindaam

 

<tr class="zils">

<td>zils</td>

</tr>

<tr>

<td>balts</td>

</tr>

[NiTrino]

ar "pliku" css katru otro rindu iekrāsot nesanāks.

Toties tam var palīdzēt PHP:

 

$odd = $i%2==0?'odd':'';

echo '<tr class="'.$odd.'">'

 

un attiecīgi

tr.odd { background:#ccc; }

[briedis]

Jquery te ir spēks :)

 

JS

$(document).ready(function(){
 $("table#zebra tr:odd").addClass("highlighted");
});

 

HTML

<table id="zebra">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

 

CSS

table#zebra tr.highlighted td{
background-color:green;
}

Edited October 21, 2009 by briedis

[marcis]

Briedi, tavs JS piešķirs klasi katrai otrajai kolonai, nevis katrai otrajai rindai :)

[briedis]

Sorry, apmudījos gudrībā :D Kļūda labota...

[mefisto]

Tātad ... lai uztaisītu hover efektu vajag izmantot jQuery ?!?

Vai es esmu vienīgais, kuram tas liekas nedaudz debīli ?

 

Un tas tavs kods tāpat nedarbojas.

 

 

Anyway: http://innonesen.se/test/l-42/

[briedis]

$(document).ready(function(){ 
 $("table#zebra tr:odd").addClass("highlighted");

 $("table#zebra tr").hover(function(){
   $(this).addClass("hover");
 },function(){
   $(this).removeClass("hover");
 });
});

 

CSS

table#zebra tr.hover td{
background-color:green;
}
table#zebra tr.highlighted.hover td{
background-color:red;
}

 

 

A man liekas debīli rakstīt 70 rindiņas, ja var uzrakstīt 10 rindiņas...

 

 

Un ne jau vienīgā vieta, kur var izmantot jquery ir liekot hover efektus...

Edited October 21, 2009 by briedis

[Kavacky]

Vai es esmu vienīgais, kuram tas liekas nedaudz debīli ?

Nebūsi vis.

 

$(document).ready(function(){ 
 $("table#zebra tr:odd").addClass("highlighted");

 $("table#zebra tr").hover(function(){
   $(this).addClass("hover");
 },function(){
   $(this).removeClass("hover");
 });
});

 

A man liekas debīli rakstīt 70 rindiņas, ja var uzrakstīt 10 rindiņas..

10 rindiņas ar jQuery vs:

$i = 0; // ārpus cikla
$i++;
$highligh = $i % 2 ? '' : ' highlight';
echo '<rinda class="[..]', $hightlight, '">blah dati</rinda>';

Jeb - veselas 3 jaunas rindiņas + labojums ceturtajā. Ne tuvu minētajām 70 rindām. Un civilizēti browseri, cik atceros, saprot :hover pseidoklasi bez jebkādas JavaScript iejaukšanās.

Edited October 21, 2009 by Kavacky

[briedis]

Kavacky, es tās 70 rindas sakarā mefisto hover minēto skriptu. Protams, ka ar php var iekrāsot pavisam elementāri... Jquery bija tikai alternatīva.

[mefisto]

emm ... oh augstais guru .. a tu piskaitīji klāt paša jquery.js rindu skaitu ?

[xPtv45z]

Ja jau skaitāt rindiņas, tad jquery produkcijas versijai, ir tikai 11 rindiņas, no kurām 10 ir komentāri. :D