Dryžuota lentelė

Š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:

Šis įrašas buvo paskelbtas kategorijoje Programavimas su žyma , , , , . Įrašykite į adresyną nuolatinę nuorodą.

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *