Šis php skriptas dinamiškai sugeneruos dryžuotą lentelę:
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>id</td>
<td>info</td>
</tr>
<?
$array = array("info1", "info2", "info3", "info4", "info5");
$s=0;
$i=0;
foreach($array as $item){
$i++;
if($s==0){
$style=' style="background-color: #CCC;"';
$s=1;
}else{
$style='';
$s=0;
}
echo '<tr'.$style.'>
<td>'.$i.'</td>
<td>'.$item.'</td>
</tr>';
}
?>
</table>
Bus tokia lentelė:
| id | info |
| 1 | info1 |
| 2 | info2 |
| 3 | info3 |
| 4 | info4 |
| 5 | info5 |
Kitas būdas padaryti lentelę dryžuota, tai panaudoti javascript biblioteką jQuery ir css klases.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Striped table</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table.stripe_table tr:odd").addClass("alternate");
$("table.stripe_table tr").mouseover(function(){
$(this).addClass("tr_onmouseover");
});
$("table.stripe_table tr").mouseout(function(){
$(this).removeClass("tr_onmouseover");
});
$("table.stripe_table tr").click(function(){
$(this).toggleClass("tr_onmouseclick");
});
});
</script>
<style type="text/css">
<!--
table.stripe_table tr.alternate{
background-color: #CCC;
}
table.stripe_table tr.tr_onmouseover{
background-color: #FC0
}
table.stripe_table tr.tr_onmouseclick{
background-color: #F00;
}
-->
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" class="stripe_table">
<tr>
<td>id</td>
<td>info</td>
</tr>
<tr>
<td>1</td>
<td>info1</td>
</tr>
<tr>
<td>2</td>
<td>info2</td>
</tr>
<tr>
<td>3</td>
<td>info3</td>
</tr>
<tr>
<td>4</td>
<td>info4</td>
</tr>
<tr>
<td>5</td>
<td>info5</td>
</tr>
</table>
</body>
</html>
Lentelei priskiriama css klasę kurioje aprašoma alternatyvi lentelės eilutės spalva (klasė table.stripe_table tr.alternate) ir papildomai spalvos esant pelės žymekliui eilutėje (table.stripe_table tr.tr_onmouseover) ar paspaudus eilutę (table.stripe_table tr.tr_onmouseclick). jQuery funkcija addClass priskirs css klasę pasirinktai eilutei, o eilutę pasirenkama jQuery selektoriumi "table.stripe_table tr:odd" t.y visoms lentelėms su klase stripe_table ir visoms nelyginėms eilutėms šiose lentelėse. jQuery funkcijos mouseover() ir mouseout() apdoroja pelės pozicija - eilutėje ar ne. O funkcija click() suveikia po pelės paspaudimo. Toliau funkcija toggleClass() priskiria css klasę jei jos nėra ir atvirkščiai panaikina jei klasė yra.
Skripto rezultas:
