rendered paste body <!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" => "Nom rubrique", "align" => "center", "width" => "40px"), array("name" => "Nom sous rubriques", "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="<?php echo $PHP_SELF; ?>"> <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>