 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test d'un select</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background-color : #EEEEEE;

}

legend {
font: 11px Tahoma;
color : #2266AA;
padding : 0px 4px 0px 4px;
}

fieldset {
border : 1px solid #AAAAAA;
padding : 4px 4px 4px 4px;
}

/*
===========================
balise obligatoire
===========================
*/
.div_select {
border: 1px solid #00CCFF;
width : 400px;
background-color : #FFFFFF;
}

.div_select_header {
border-bottom: 1px solid #00CCFF;
background-color : #00CCFF;
}

.div_select_header td {
padding: 0px 6px 0px 6px;
font: 11px Tahoma;
font-weight: bold;
background-color : #00CCFF;
color: #FFFFFF;
}

.div_select_content td {
padding: 0px 6px 0px 6px;
font: 10px Tahoma;

}

.div_select_content {
width : 400px;
height : 172px ;
overflow : scroll;
scrollbar-face-color: #DDDDDD;
scrollbar-shadow-color: #777777;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #eeeeee;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #eeeeee;
scrollbar-arrow-color: #000000
}

.select_even {
cursor: hand;
background: #FFFFFF;
}

.select_odd {
cursor: hand;
background: #F2FAFF;
}

.select_over {
cursor: hand;
background-color : #CCEEFF;
color: #000000;
font-weight: bold;
}

.select_checked {
cursor: hand;
background-color : #CCFF99;
color: #000000;
font-weight: bold;
}

.div_cadre {
width: 600px;
text-align:center;
background-color: #FFFFFF;
border : 1px dashed #CCCCCC;
padding: 10px 20px 20px 20px;
}

</style>
<script language="javascript" type="text/javascript">

/**
* selectionne l'ensemble des elements d'une liste déroulante avec checkbox
* @param :
* - obj : le nom du pseudo-composant
* - nb : nombre d'elements que contient le composant
*/
function selectAll(obj, nb) {
for (i=0; i< nb; i++) {
document.getElementById(obj.id + i).checked = obj.checked;

if(obj.checked)
document.getElementById("tr_"+obj.id+i).className = "select_checked";
else {
if(i % 2)
css = "select_odd"
else
css ="select_even";

document.getElementById("tr_"+obj.id+i).className = css;
}
}
}

/**
* selectionne l'ensemble des elements d'une liste déroulante avec checkbox
* @param :
* - obj : le nom du pseudo-composant
* - el_id : id de l'element (position dans le composant)
* - ev : le type d'evenement
* - css_defaut : le style de la ligne par defaut
* - nb : le nombre d'elements
*/
function setEvenement(obj, el_id, ev, css_defaut, nb, provenance) {

//--- recuperation des balises
comp = document.getElementById(obj);
tr = document.getElementById("tr_" + obj + el_id);
ck = document.getElementById(obj + el_id);

//--- si il s'agit d'un clique
if(ev == "click") {
//--- alors on coche ou decoche la checkbox
if(provenance = "td") ck.checked = !ck.checked;


//--- si on decoche, alors on decoche aussi la checkbox du composant
if(!ck.checked) {
if(comp.checked) comp.checked = false;
}
else {

//---sinon on vérifie que tous les elements sont cochés
var absent = false;
var i = 0;

while(i < nb && absent == false) {
if(i != el_id) {
if(!document.getElementById(obj + i).checked) absent = true;
}
i++;
}

if(comp.checked == absent) comp.checked = !absent;
}
}

//--- autres evenements
switch(ev) {
case "over":
tr.className = "select_over";
break;

case "out":
if(ck.checked)
tr.className = "select_checked";
else
tr.className = css_defaut;
break;
}
}

</script>
</head>
<body>
<?php

/**
* permet de créer le pseudo-composant
* @param :
* - nom : le nom du composant
* - structure : les colonnes, les dimensions, les alignements (tableau)
* - contenu : les elements : valeur checkbox + autres colonnes (tableau)
* - selection : tableau de valeur a selectionner (correspond a la valeur de la checkbox)
*/
function checkedSelect( $nom, $structure, $contenu, $selection = null) {

//////////////// entete du composant \\\\\\\\\\\\\\\\\\\\\\\\\
if(sizeof($selection) == sizeof($contenu))
$checked = "checked";
else
$checked = "";


$str = '<div class="div_select">'
.'<div class="div_select_header">'
.'<table width="100%">'
.'<tr>'
.'<td width="20" align="center"><input type="checkbox" id="'.$nom.'" onClick="javascript:selectAll(this, '.sizeof($contenu).');" '.$checked.'/></td>';

//--- colonnes
for($i = 0, $max = sizeof($structure); $i < $max; $i++) {
$str .= '<td ';
if(isset($structure[$i]["align"])) $str .= 'align="'.$structure[$i]["align"].'" ';
if(isset($structure[$i]["width"])) $str .= 'width="'.$structure[$i]["width"].'" ';
$str .= '>'.$structure[$i]["name"].'</td>';
}

$str .= '<td width="1"></td>'
.'</tr>'
.'</table>'
.'</div>';

//////////////// contenu du composant \\\\\\\\\\\\\\\\\\\\\\\\\
$str .= '<div class="div_select_content" >'
.'<table width="100%">';

//--- pour chaque ligne
for($i = 0, $max = sizeof($contenu); $i < $max; $i++) {

//--- style css (pair / impair)
if($i%2)
$css_defaut = 'select_odd';
else
$css_defaut = 'select_even';

//--- element selectionne ?
if($selection != null && in_array($contenu[$i][0],$selection)) {
$checked = ' checked';
$css = 'select_checked';
}
else {
$checked = '';
$css = $css_defaut;
}

//--- la checkbox
$str .= '<tr id="tr_'.$nom.$i.'" class="'.$css.'" onMouseOver=\'javascript:setEvenement("'.$nom.'","'.$i.'","over","'.$css.'",'.sizeof($contenu).',"td");\' onMouseOut=\'javascript:setEvenement("'.$nom.'","'.$i.'","out","'.$css_defaut.'",'.sizeof($contenu).',"td");\' '
.' onClick=\'javascript:setEvenement("'.$nom.'","'.$i.'","click", "'.$css_defaut.'",'.sizeof($contenu).',"td");\' >'
.'<td width="20" ><input type="checkbox" id="'.$nom.$i.'" name="'.$nom.'[]" value="'.$contenu[$i][0].'" onClick=\'javascript:setEvenement("'.$nom.'","'.$i.'","click","'.$css_defaut.'",'.sizeof($contenu).',"ck");\' '.$checked.' /></td>';

//--- les colonnes
for($j = 1; $j < sizeof($contenu[$i]); $j++) {
$str .= '<td ';
if(isset($structure[$j-1]["align"])) $str .= 'align="'.$structure[$j-1]["align"].'" ';
if(isset($structure[$j-1]["width"])) $str .= 'width="'.$structure[$j-1]["width"].'" ';
$str .= '>'.$contenu[$i][$j].'</td>';
}

$str .= '</tr>';
}

//--- fermeture des balises
$str .= '</table>'
.'</div>'
.'</div>';

return $str;
}


//===============================================================
// VARIABLES D'EXEMPLES
//===============================================================
$nom = "test1";

$structure = array (
array("name" => "CODE", "align" => "center", "width" => "40px"),
array("name" => "NOM", "align" => "left", "width" => null)
);

$contenu = array (
array("AD", "AD", "TEST AD"),
array("CC", "CC", "TEST CC"),
array("DZ", "DZ", "TEST DZ"),
array("GV", "GV", "TEST GV"),
array("LS", "LS", "TEST LS"),
array("LC", "LC", "TEST LC"),
array("SG", "SG", "TEST SG")
);

$nom2 = "test2";

$structure2 = array (
array("name" => "CODE", "align" => "center", "width" => "40px"),
array("name" => "NOM", "align" => "left", "width" => null),
array("name" => "MONTANT", "align" => "right", "width" => "60px")
);

$contenu2 = array (
array("001", "001", "TEST 01", "150 €"),
array("002", "002", "TEST 02", "80 €"),
array("003", "003", "TEST 03", "120 €"),
array("004", "004", "TEST 04", "160 €"),
array("005", "005", "TEST 05", "20 €"),
array("006", "006", "TEST 06", "70 €"),
array("007", "007", "TEST 07", "150 €") ,
array("005", "005", "TEST 08", "2 654 €"),
array("009", "009", "TEST 09", "34 €"),
array("010", "010", "TEST 10", "27,50 €")
);

//======================================================
// VERFICATION DU POST
//======================================================
if($_POST["submit"])
  {
     echo '<b>Formulaire validé avec les éléments : </b><br>';

	echo '<b>- '.$nom.' :</b> ';
	
	for($i = 0; $i < sizeof($_POST[$nom]); $i++)
	   {
		if($i > 0) echo ', ';
		echo $_POST[$nom][$i];
	   }

	echo '<br /><b>- '.$nom2.' :</b> ';
	
	for($i = 0; $i < sizeof($_POST[$nom2]); $i++) 
	{
		if($i > 0) echo ', ';
	echo $_POST[$nom2][$i];
}

echo '<br /><br />';
}

?>


<!-- SelectableTableRows multiple-->
<div align="center">
<div class="div_cadre">
<fieldset>
<legend>Test de selection</legend>
<form name="form_select" method="post" action="">
<div align="center" >
<?php echo checkedSelect($nom, $structure, $contenu, $_POST[$nom]); ?>
<br />
<?php echo checkedSelect($nom2, $structure2, $contenu2, $_POST[$nom2]); ?>
<br /><input type="submit" name="submit" value="envoyer" />
</div>
</form>
</fieldset>
</div>
</div>

</body>
</html> 