Parent child... Comment faire ?

Question

jytest

18 Apr 2013 à 22:42

Bonsoir,

J'ai quelques soucis avec mes jquery.
Allez-vous pouvoir et vouloir m'aider ?
- Je souhaiterai que quand je clique sur "Détails", cela fasse la même chose que quand je clique sur le "+"... En fait, j'y suis presque... Seul le "+" ne veut pas se changer en "-"...
- je n'arrive pas à "tout développer"
- Je n'arrive pas non plus à "tout fermer" !
- J'aurais souhaité que mes lignes détails aient la même couleur que leur ligne maîtresse.
Je m'explique :
la ligne 1 est sur fond gris... j'aurais souhaité que les détails de cette ligne soient aussi sur fond gris...
la ligne 2 est sur fond blanc... j'aurais souhaité que les détails de cette ligne soient aussi sur fond blanc...
la ligne 3 est sur fond gris... j'aurais souhaité que les détails de cette ligne soient aussi sur fond gris...
la ligne 4 est sur fond blanc... j'aurais souhaité que les détails de cette ligne soient aussi sur fond blanc...
et ainsi de suite...
- Supprimer le onmouseover sur toutes les lignes détail
- Et enfin, j'aurais aussi voulu "insérer" le Drill-down_rows de datatables...
Mais je n'y arrive vraiment pas.

Voici ma page ici

A l'aide, svp !!!

Voici mon code :


<?php
	session_start();
	ob_start();
	$php="recherche20";
	$rubrique="recherche";
//	require_once("php/cliquer.inc.php");
//	cliquer($rubrique);
	date_default_timezone_set('Europe/Brussels');
	$travaux="";
	
	require_once("php/connexionMysql.inc.php");

	$jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"); 
	$mois = array("","janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre");
	$datefr = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y");
	$heurefr = " à ".date("H")."h".date("i");
	$datum = $datefr.$heurefr;

	$libforme = array ("", "Rond", "Princesse", "Emeraude", "Radiant", "Ovale", "Poire", "Marquise", "Coeur", "Asscher CS");
	$imgforme = array ("", "rond.jpg", "princesse.jpg", "emeraude.jpg", "radiant.jpg", "oval.jpg", "poire.jpg", "marquise.jpg", "coeur.jpg", "vide.gif");
	$libcritere = array ("Poli", "Symétrie", "% Profondeur", "% Table", "Fluorescence", "Prix / Carat", "Colette", "Rapport long / larg");
	$libcouleur = array ("", "D", "E", "F", "G", "H", "I", "J", "K");
	$libtaille = array ("", "Faible", "Bon", "Très bon", "Excellent", "Idéal");
	$libpurete = array ("", "IF", "VVS1", "VVS2", "VS1", "VS2", "SI1", "SI2", "SI3", "I1");
	$libpoli = array ("", "Faible", "Bon", "Très bon", "Excellent", "Idéal");
	$libsymetrie = array ("", "Faible", "Bon", "Très bon", "Excellent", "Idéal");
	$libfluo = array ("", "Sans", "Très légère", "Légère", "Faible", "Moyen", "Forte", "Très forte");
	$libcolette = array ("", "Pointue", "Très petite", "Petite", "Moyenne", "Large");
	$libcertificat = array ("", "GIA", "HRD", "IGI", "EGL", "AGS");

	$nbforme = count($libforme);
	$nbcritere = count($libcritere);
	$nbcouleur = count($libcouleur)-1;
	$nbtaille = count($libtaille)-1;
	$nbpurete = count($libpurete)-1;
	$nbpoli = count($libpoli)-1;
	$nbsymetrie = count($libsymetrie)-1;
	$nbfluo = count($libfluo)-1;
	$nbcolette = count($libcolette)-1;
	$nbcertificat = count($libcertificat);

	$repertoire = "images/recherche/";

//	if (isset($_SESSION['recherche'])) {
//		$stringcomparer = $_SESSION['recherche']['stringcomparer'];
//		if ($stringcomparer == "") {
//			header("Location: recherche00.php");
//			exit;
//		}
//	} else {
//		header("Location: recherche00.php");
//		exit;
//	}
	$stringcomparer = "77887028:89895440:89895435:88896257";
	
	
	unset($refcomparer);
	$refcomparer = explode(":", $stringcomparer);

	$jourslivraison = 1;
	$livreur = "UPS";
	
    function dimanche_paques($annee) {
        return date("Y-m-d", easter_date($annee));
    }
    function vendredi_saint($annee) {
        $dimanche_paques = dimanche_paques($annee);
        return date("Y-m-d", strtotime("$dimanche_paques -2 day"));
    }
    function lundi_paques($annee) {
        $dimanche_paques = dimanche_paques($annee);
        return date("Y-m-d", strtotime("$dimanche_paques +1 day"));
    }
    function jeudi_ascension($annee) {
        $dimanche_paques = dimanche_paques($annee);
        return date("Y-m-d", strtotime("$dimanche_paques +39 day"));
    }
    function lundi_pentecote($annee)     {
        $dimanche_paques = dimanche_paques($annee);
        return date("Y-m-d", strtotime("$dimanche_paques +50 day"));
    }
    function jours_feries($annee, $alsacemoselle=false) {
        $jours_feries = array
        (    dimanche_paques($annee)
        ,    lundi_paques($annee)
        ,    jeudi_ascension($annee)
        ,    lundi_pentecote($annee)
        
        ,    "$annee-01-01"        //    Nouvel an
        ,    "$annee-05-01"        //    Fête du travail
        ,    "$annee-05-08"        //    Armistice 1945
        ,    "$annee-05-15"        //    Assomption
        ,    "$annee-07-14"        //    Fête nationale
        ,    "$annee-11-11"        //    Armistice 1918
        ,    "$annee-11-01"        //    Toussaint
        ,    "$annee-12-25"        //    Noël
        );
        if($alsacemoselle)
        {
            $jours_feries[] = "$annee-12-26";
            $jours_feries[] = vendredi_saint($annee);
        }
        return $jours_feries;
    }
    function est_ouvre($jour, $alsacemoselle=false) {
		$jj = date("w", strtotime($jour));
		$rep = 1;
		if ($jj == 6 OR $jj == 0) {
			$rep = 0;
		} else {
			$jour = date("Y-m-d", strtotime($jour));
			$annee = substr($jour, 0, 4);
			$jours_feries = jours_feries($annee);
			for ($jee=0; $jee<count($jours_feries); $jee++) {
				if ($jour == $jours_feries[$jee]) {
					$rep = 0;
					break;
				}
			}
		}
		return $rep;
    }
	function datereception($datecommande, $delaicommande, $delaiexpedition) {
		$ajout = $delaicommande + $delaiexpedition;
		$ijour = 1;
		$datum = strtotime(date("Y-m-d"), $datecommande);
		while ($ijour < $ajout) {
			$datum += 86400;
			$ijour += est_ouvre(date('Y-m-d', $datum));
		}
		return date('d/m/Y', $datum);
	}

	ob_end_flush();
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name = "reply-to" content = "creaprint@skynet.be"/>
<meta name = "author" content = "creaprint"/>
<meta name = "description" content = "Recherchez votre diamant"/>
<meta name = "keywords" content = ""/>

<title>celinni.com - Recherche de diamant</title>
<style type="text/css">
<!--
-->
</style>
<!--
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />
-->
<link type="text/css" rel="stylesheet" href="css/font_AvantGarde2BQRoman.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/general.css">
<link type="text/css" rel="stylesheet" href="css/general12.css">
<link type="text/css" rel="stylesheet" href="css/recherche20.css">
<link type="text/css" rel="stylesheet" href="js/dt/jquery.dataTables.css">
<link type="text/css" rel="stylesheet" href="js/dt/jquery.dataTables-my.css">
<link type="text/css" rel="stylesheet" href="js/dt/jquery.dataTables.scroller.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dt/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/dt/jquery.dataTables.scroller.js"></script>
<script type="text/javascript" src="js/dt/jquery.dataTables.FixedHeader.js"></script>
<script type="text/javascript" src="js/dt/jquery.dataTables.columnFilter.js"></script>
<script type="text/javascript" src="js/dt/jquery.dataTables.numericComma.js"></script>
<script type="text/javascript" src="js/requete.js"></script>
<script type="text/javascript">
	var libforme = new Array();
	var imgforme = new Array();
	var oTable;
	var nCloneTh, nCloneTd;
	var aData = "";
	var forme = "", image = "";
	var sOut = "";
	var example = "830px";
	var colour = "";
	var k1 = 0;

	<?php
	for ($k=0; $k<$nbforme; $k++) {
	?>
		libforme[k1] = "<?php echo strtolower($libforme[$k]); ?>";
		imgforme[k1] = "<?php echo $repertoire.$imgforme[$k]; ?>";
		k1++;
	<?php
	}
	?>

	$(function() {
		nCloneTh = document.createElement( 'th' );
		nCloneTd = document.createElement( 'td' );
		nCloneTd.innerHTML = '<img src="images/recherche/detailouvrir.gif">';
		nCloneTd.className = "center";

		$('#example thead tr').each( function () {
			this.insertBefore( nCloneTh, this.childNodes[0] );
		} );
		 
		$('#example tbody tr').each( function () {
			this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
		} );

        oTable = $('#example').dataTable( {
			"sScrollY": example,
//			"bPaginate": false,
			"bFilter": false,
			"bInfo": false,
			"bScrollCollapse": true,
			"BJQueryUI" : false,
			"aoColumns": [
				{ "sTitle": " ",			"bSortable": false,
				"sClass": "alignCenter", 	"bVisible": true							},
				{ "sTitle": "forme",		"bSortable": true,
				"sClass": "alignLeft",    	"bVisible": true							},
				{ "sTitle": "carat",		"bSortable": true,
				"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "couleur",		"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "taille",		"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "pureté",		"bSortable": true,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "détails",		"bSortable": false,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "comparer",		"bSortable": false,
				"sClass": "alignCenter",  	"bVisible": true							},
				{ "sTitle": "prix",			"bSortable": true,
				"sClass": "alignRight",  	"bVisible": true							},
				{ "sTitle": "reference",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "symetrie",		"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "polissage",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "fluorescence",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "certificat",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "profondeur",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "table",		"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "rondiste",		"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "colette",		"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "dimensions",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "rll",			"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "prixparcarat",	"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							},
				{ "sTitle": "prixfull",		"bSortable": false,
				"sClass": "alignRight",  	"bVisible": false							}
			],
			"sDom": "frtiS",
        	"aaSorting": [[ 8, "asc" ]]
		} );
		$(".dataTables_scrollBody").height(example);
		$(".dataTables_scrollHead").height("25px");

		$('#example tbody td img').live('click', function () {
			var nTr = $(this).parents('tr')[0];
			if (oTable.fnIsOpen(nTr)) {
				this.src = "images/recherche/detailouvrir.gif";
				oTable.fnClose( nTr );
			} else {
				this.src = "images/recherche/detailfermer.gif";
				oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
			}
		} );

		$('#example tbody td .voir').live('click', function () {
			var nTr = $(this).parents('tr')[0];
			if (oTable.fnIsOpen(nTr)) {
				this.src = "images/recherche/detailouvrir.gif";
				oTable.fnClose( nTr );
			} else {
				this.src = "images/recherche/detailfermer.gif";
				oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
			}
		} );

		$('#example tbody tr').live('mouseover', function () {
			this.style.cursor='pointer';
			colour = this.style.backgroundColor + '';
			this.style.backgroundColor = '#C7D6EE';
			this.style.color = '#005BAA';
		} );
	
		$('#example tbody tr').live('mouseout', function () {
			this.style.backgroundColor = colour;
			this.style.color = '#666666';
		} );
	} );

	function fnFormatDetails (oTable, nTr) {
		aData = oTable.fnGetData( nTr );
		forme = aData[1];
		image = imgforme[libforme.length-1];
		for (var k=1; k<libforme.length; k++) {
			if (forme == libforme[k]) {
				image = imgforme[k];
				k = libforme.length;
			}
		}
		sOut = "<table cellpadding='5' cellspacing='0' border='0' style='margin:7px 0px 7px 0px; padding-left:0px; background-color:"+colour+";'>";
//		sOut += "<tr><td width='70'></td><td width='120'></td><td width='180'></td><td width='120'></td><td width='180'></td><td width='100'></td></tr>";
		sOut += "<tr><td rowspan='9' valign='top' align='center' style='width:70px; background-color:#FFFFFF;'>";
		sOut += "<img src='"+image+"' width='63' height='63' alt='recherche diamant'>";
		sOut += "</td>";
		sOut += "<td>Référence :</td><td>"+aData[9]+"</td><td>Profondeur % :</td><td>"+aData[14]+"</td>";
		sOut += "<td valign='bottom' style='width:60px; text-align:center;' rowspan='9'>";
		sOut += "<a href='boutique.php'>Ajouter<br>au Panier<br><img src='images/boutique/panier.gif' alt='ajouter' name='ajouter' width='26' height='20' id='ajouter'></a>";
		sOut += "</td>";
		sOut += "</tr>";
		sOut += "<tr><td style='width:80px;'>Poids (carats) :</td><td style='width:130px;'>"+aData[2]+"</td><td style='width:80px;'>Table % :</td><td style='width:130px;'>"+aData[15]+"</td></tr>";
		sOut += "<tr><td>Qualité de taille :</td><td>"+aData[1]+"</td><td>Rondiste :</td><td>"+aData[16]+"</td></tr>";
		sOut += "<tr><td>Symétrie :</td><td>"+aData[10]+"</td><td>Colette :</td><td>"+aData[17]+"</td></tr>";
		sOut += "<tr><td>Polissage :</td><td>"+aData[11]+"</td><td>Dimensions :</td><td>"+aData[18]+"</td></tr>";
		sOut += "<tr><td>Couleur :</td><td>"+aData[3]+"</td><td>Rapport Long/Larg :</td><td>"+aData[19]+"</td></tr>";
		sOut += "<tr><td>Pureté :</td><td>"+aData[5]+"</td><td>Prix/carat :</td><td>"+aData[20]+" €</td></tr>";
		sOut += "<tr><td>Fluorescence :</td><td>"+aData[12]+"</td><td>Prix habituel</td><td>"+aData[21]+" €</td></tr>";
		sOut += "<tr><td>Certificat :</td><td>"+aData[13]+"</td><td>Prix Celinni</td><td>"+aData[8]+" €</td></tr>";
		sOut += '</table>'; 
		return sOut;
	}

	function envoiDetails(sref) {
	}

	function acomparer(sref) {
		var nocomparaison = "comparer["+sref+"]";
		var etat = document.getElementById(nocomparaison).checked+0;
		var requete = creerRequete();
		requete.open("GET", "php/session_stringcomparer.php?reference="+sref+"&etat="+etat, true);
		requete.send();
	}
 
	function toutouvrir() {
		alert("tout ouvrir");
	}

	function toutfermer() {
		alert("tout fermer");
	}
	  
</script>
<style type="text/css">
<!--
-->
</style>

</head>
<body>

<div id="referencement">
<h1>Celinni</h1>
</div>

<div id="ombre">
<div id="site">

	<div id="boutique">
    </div>

    <div id="entete">
    </div>
    
    <div id="menu">
    </div>
    
    <div id="titre">
    	Comparez vos diamants certifiés
    </div>
    
    <div id="contenu">
        <div id="bloc30">
          <div id="bloc31">
            <div id="infos00" style="margin-top:0px;">
            	<p style="text-align:right;"><a href="recherche00.php">Autre Recherche&nbsp;<img src="images/general/loupebleue.gif" width="14" height="15" alt="recherche"></a></p>
                <p style="margin-top:15px;">Voici la liste des diamants que vous voulez comparer. 
                Cliquez sur <span class="bleufonce">Tout développer</span> pour voir plus de détails sur chaque diamant y compris les mesures, ceinture, colette et plus encore. 
                Cliquez sur <span class="bleufonce">Tout réduire</span> pour fermer la liste élargie et afficher uniquement les informations récapitulatives pour chaque diamant.</p>
                <div>
                <a href="javascript:toutouvrir();"><img src='images/recherche/detailouvrir.gif' width='10' height='10' alt='recherche diamant'>&nbsp;Tout développer</a>
                &nbsp;&nbsp;-&nbsp;&nbsp;
                <a href="javascript:toutfermer();"><img src='images/recherche/detailfermer.gif' width='10' height='10' alt='recherche diamant'>&nbsp;Tout refermer</a>
                </div>
            </div>
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                <thead>
                </thead>
                <tbody>  
				<?php
				for ($lig=0; $lig<count($refcomparer); $lig++) {
                    $reqdiamant = "SELECT * FROM diamant_data".
                        " WHERE item_id='".$refcomparer[$lig]."' ";
                    $resdiamant=mysql_query($reqdiamant);
                    $back = mysql_fetch_assoc($resdiamant);
                    if ($back) {
                        $reference = trim($back['item_id']);
                        $prixsite_ht = trim($back['total_price_ht']);
                        $prixsite_ttc = trim($back['total_price']);
                        $forme = strtolower(trim($back['cut']));
                        $poids = number_format(trim($back['carat']),2);
                        $couleur = trim($back['color']);
                        $purete = trim($back['clarity']);
                        $dimensions = trim($back['dimensions']);
                        $profondeur = trim($back['depth']);
                        $table = trim($back['table']);
                        $taille = trim($back['cut_grade']);
                        $symetrie = trim($back['symmetry']);
                        $rondiste = trim($back['girdle']);
                        $poli = trim($back['polish']);
                        $culetfr = trim($back['culet_size']);
                        $fluorescence = trim($back['fluo_intensity']);
                        $certificat = trim($back['certificat']);
                        $prixparcarat_ht = trim($back['price_per_carat_ht']);;
                        $prixparcarat_ttc = trim($back['price_per_carat']);;
                        $prixfull_ht = trim($back['total_full_price_ht']);;
                        $prixfull_ttc = trim($back['total_full_price']);;
                        $rll = trim($back['length_width']);
                        $delai = trim($back['delay']);
                        $certificatpdf = trim($back['certificate_path']);
                        if ($prixparcarat == 0 OR $prixparcarat == "") {
                            $prixparcarat = "nc";	
                        } else {
                            $prixparcarat .= " €";	
                        }
                        if ($couleur == "") {
                            $couleur = "nc";	
                        }
                        if ($purete == "") {
                            $purete = "nc";	
                        }
                        if ($profondeur <= 0) {
                            $profondeur = "nc";	
                        } else {
                            $profondeur = number_format($profondeur,2,",",".")."%";
                        }
                        if ($table <= 0) {
                            $table = "nc";
                        } else {
                            $table = number_format($table,2,",",".")."%";
                        }
                        if ($taille == "") {
                            $taille = "nc";	
                        }
                        if ($symetrie == "") {
                            $symetrie = "nc";	
                        }
                        if ($poli == "") {
                            $poli = "nc";	
                        }
                        if ($dimensions == "") {
                            $dimensions = "nc";	
                        } else {
                            $dimensions .= "mm";	
                        }
                        if ($culetfr == "") {
                            $culetfr = "nc";	
                        }
                        if ($fluorescence == "") {
                            $fluorescence = "nc";	
                        }
                        if ($certificat == "") {
                            $certificat = "nc";	
                        }
                        if (strpos($rondiste, "/")  === false) {
                            if ($rondiste == "") {
                                $ligrondiste[0] = "nc";
                                $ligrondiste[1] = "";
                            } else {
                                $ligrondiste[0] = $rondiste;
                                $ligrondiste[1] = "";
                            }
                        } else {
                            unset ($ligrondiste);
                            $ligrondiste = explode("/",$rondiste);
                            $ligrondiste[0] = trim($ligrondiste[0]);
                            $ligrondiste[1] = "à ".trim($ligrondiste[1]);
                        }
                        if ($rll <= 0) {
                            $rll = "nc";	
                        } else {
                            $rll = number_format($rll,2,",",".");
                        }
                        if ($delai != "") {
                            unset ($joursdelai);
                            $joursdelai = explode(" ",$delai);
                            $joursdelai[0] = trim($joursdelai[0]);
                            $joursdelai[1] = $joursdelai[0] + 2;
                            $joursnonserti = $joursdelai[0] + $jourslivraison;
                            $joursserti = $joursdelai[1] + $jourslivraison;
                            if ($jourdelai[0] < 2) {
                                $joursdelai[0] .= " jours";
                            } else {
                                $joursdelai[0] .= " jour";
                            }
                            if ($jourdelai[1] < 2) {
                                $joursdelai[1] .= " jours";
                            } else {
                                $joursdelai[1] .= " jour";
                            }
                            $datenonserti = datereception(date("Y-m-d"), $joursnonserti, $jourslivraison);
                            $dateserti = datereception(date("Y-m-d"), $joursserti, $jourslivraison);
                        } else {
                            $datenonserti = "nc";
                            $dateserti = "nc";
                        }
						echo "<tr>";
						echo "<td>".$forme."</td>";
						echo "<td>".$poids."</td>";
						echo "<td>".$couleur."</td>";
						echo "<td>".$taille."</td>";
						echo "<td>".$purete."</td>";
						echo "<td><a href='javascript:envoiDetails(".$reference.");'><span class='voir'>Détails</span></a></td>";
						echo "<td><div id='tag".$reference."'><input id='comparer[".$reference."]' type='checkbox' class='curseur' onclick='acomparer(".$reference.");' CHECKED></div></td>";
						echo "<td>".$prixsite_ht."</td>";
						
						echo "<td>".$reference."</td>";
						echo "<td>".$symetrie."</td>";
						echo "<td>".$poli."</td>";
						echo "<td>".$fluorescence."</td>";
						echo "<td>".$certificat."</td>";
						
						echo "<td>".$profondeur."</td>";
						echo "<td>".$table."</td>";
						echo "<td>".$rondiste."</td>";
						echo "<td>".$culetfr."</td>";
						echo "<td>".$dimensions."</td>";
						echo "<td>".$rll."</td>";
						echo "<td>".$prixparcarat_ht."</td>";
						echo "<td>".$prixfull_ht."</td>";
						
						echo "</tr>";
                    }
				}
                ?>
            </tbody>
            </table>
          </div>
          <div id="bloc32">
          </div>
          <div style="clear:left;"></div>
        </div>
    </div>
    
    <div id="pied">
    </div>

</div>
</div>

<div id="dessous"></div>
<div id="contacteznous00">
	<div id="contacteznous10">
    <div id="contacteznous20">
        <a href="recherche00.php" alt="help"><img src="images/general/vide.gif" width="220" height="65"></a>
    </div>
    </div>
    <div style="position:absolute; top:55px; padding-left:10px;" class="bold orange"><?php echo ($travaux!="")?"Cette page est momentanément en maintenance... Veuillez nous en excuser !":""; ?></div>
</div>



</body>
</html>

Modifié par jytest (22 Apr 2013 - 19:27)

tazzkiller

22 Apr 2013 à 02:17

voila donc les deux fonctions dont tu as besoin :

pour tout ouvrir


function toutouvrir() {
$('#example tbody tr td .voir').each( function() {
			if( !oTable.fnIsOpen( $(this).parents('tr')[0] ) ){
			var el = $(this);
				el.trigger('click');
			$('#example tbody tr').each( function() {
				$(this).find('td.center img').attr('src','images/recherche/detailfermer.gif');
				});
			}
		})
}

pour tout fermer


function toutfermer() {
$('#example tbody tr td .voir').each( function() {
			if( oTable.fnIsOpen( $(this).parents('tr')[0] ) ){
			var el = $(this);
				el.trigger('click');
			$('#example tbody tr').each( function() {
				$(this).find('td.center img').attr('src','images/recherche/detailouvrir.gif');
				});
			}
		})
}

Modifié par tazzkiller (22 Apr 2013 - 02:50)

jytest

22 Apr 2013 à 10:47

Merci à toi, tazzkiller !
Merci !!!
Ton aide est très précieuse.
Me voilà débloqué !!!

Par contre, je sais que j'abuse, mais...
Peux-tu m'aider avec :

- Je souhaiterai que quand je clique sur "Détails", cela fasse la même chose que quand je clique sur le "+"... En fait, j'y suis presque... Seul le "+" ne veut pas se changer en "-"...

- J'aurais souhaité que mes lignes détails aient la même couleur que leur ligne maîtresse.
Je m'explique :
la ligne 1 est sur fond gris... j'aurais souhaité que les détails de cette ligne soient aussi sur fond gris...
la ligne 2 est sur fond blanc... j'aurais souhaité que les détails de cette ligne soient aussi sur fond blanc...
la ligne 3 est sur fond gris... j'aurais souhaité que les détails de cette ligne soient aussi sur fond gris...
la ligne 4 est sur fond blanc... j'aurais souhaité que les détails de cette ligne soient aussi sur fond blanc...
et ainsi de suite...

- Supprimer le onmouseover sur toutes les lignes détail

- Et enfin, j'aurais aussi voulu "insérer" le Drill-down_rows de datatables...
Mais je n'y arrive vraiment pas.

A l'aide !
Modifié par jytest (22 Apr 2013 - 19:28)

tazzkiller

22 Apr 2013 à 16:27

pour pouvoir manipuler ton changement d'image il te suffit gérer cette ligne dans ta fonction click sur 'detail'


$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'chemin de ton image');

Modifié par tazzkiller (22 Apr 2013 - 16:29)

jytest

22 Apr 2013 à 16:36

Encore une fois merci pour ton aide !
J'avance, grâce à toi !

Mais pour ce qui suit, peux-tu m'aider ?

- J'aurais souhaité que mes lignes détails aient la même couleur que leur ligne maîtresse.
Je m'explique :
la ligne 1 est sur fond gris... j'aurais souhaité que les détails de cette ligne soient aussi sur fond gris...
la ligne 2 est sur fond blanc... j'aurais souhaité que les détails de cette ligne soient aussi sur fond blanc...
la ligne 3 est sur fond gris... j'aurais souhaité que les détails de cette ligne soient aussi sur fond gris...
la ligne 4 est sur fond blanc... j'aurais souhaité que les détails de cette ligne soient aussi sur fond blanc...
et ainsi de suite...

- Supprimer le onmouseover sur toutes les lignes détail

- Et enfin, j'aurais aussi voulu "insérer" le Drill-down_rows de datatables...
Mais je n'y arrive vraiment pas.
Modifié par jytest (22 Apr 2013 - 19:26)

tazzkiller

22 Apr 2013 à 17:44

voila un example pour le changement mais attention vu que ton tableau se creer dynamiquement au click tu va devoir integrer cette fonction dans chaque action d'ouverture ...


$('#example tbody tr').each( function() {
            var el = $(this);
			if( el.hasClass('odd') ){
			el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
			}
		})

jytest

22 Apr 2013 à 18:01

Puis-je te demander plus de précisions...
Ici, je ne te suis plus !
Je suis perdu...
Merci d'avance.

tazzkiller

22 Apr 2013 à 18:12

En fait datatable génère ton contenu à chaque fois que tu cliques su ton petit + pour dérouler les détails.
Si tu regarde ton code après le chargement de ta page initial le contenu n'est pas charger dans le DOM il ne se chargera qu'au click pour dérouler et disparaitra quand tu ferme. Il te faut donc appliquer ce changement pendant l'action d'ouverture pour que celui ci soit pris en compte
Modifié par tazzkiller (22 Apr 2013 - 18:56)

jytest

22 Apr 2013 à 19:26

Merci. Merci. Merci.

Il y a un petit bug
sur le fond des images "+" et "-"...
dans $('#example tbody td img').live('click'...
Le .voir ne fonctionne pas non plus !
Comment cela se fait-il ?


$('#example tbody td img').live('click', function () {
	var nTr = $(this).parents('tr')[0];
	if (oTable.fnIsOpen(nTr)) {
		this.src = "images/recherche/detailouvrir.gif";
		oTable.fnClose( nTr );
	} else {
		this.src = "images/recherche/detailfermer.gif";
		oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
	}
	$('#example tbody tr').each( function() {
		var el = $(this);
		if( el.hasClass('odd') ){
			el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
		}
	})
} );

$('#example tbody td .voir').live('click', function () {
	var nTr = $(this).parents('tr')[0];
	if (oTable.fnIsOpen(nTr)) {
		$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'images/recherche/detailouvrir.gif');
		oTable.fnClose( nTr );
	} else {
		$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'images/recherche/detailfermer.gif');
		oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
	}
	$('#example tbody tr').each( function() {
		var el = $(this);
		if( el.hasClass('odd') ){
			el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
		}
	})
} );

Me reste plus "que" :
- Supprimer le onmouseover sur toutes les lignes détail...
Modifié par jytest (22 Apr 2013 - 21:47)

tazzkiller

22 Apr 2013 à 20:29

pour ton mouseover essai de commenter ca dans ta page :


$('#example tbody tr').live('mouseover', function () {
			this.style.cursor='pointer';
			colour = this.style.backgroundColor + '';
			this.style.backgroundColor = '#C7D6EE';
			this.style.color = '#005BAA';
		} );
	
		$('#example tbody tr').live('mouseout', function () {
			this.style.backgroundColor = colour;
			this.style.color = '#666666';
		} );

et pour le bug du background c'est qu'il faut mettre cette fonction dans le else et pas apres.
Modifié par tazzkiller (22 Apr 2013 - 20:32)

jytest

22 Apr 2013 à 21:32

Voilà ma contribution :


$('#example tbody tr').live('mouseover', function () {
// je mets la main en curseur
	this.style.cursor='pointer';
// je récupère la couleur initiale en bg (gris ou blanc) avant le mouseover
	colour = this.style.backgroundColor + '';
// je mets cette ligne tr en bleu de passage de la souris et caractères en #005BAA
	this.style.backgroundColor = '#C7D6EE';
	this.style.color = '#005BAA';
} );
	
$('#example tbody tr').live('mouseout', function () {
// ici, je remets le bg et le color dans les couleurs initiales avant le mouseover (gris ou blanc)
	this.style.backgroundColor = colour;
	this.style.color = '#666666';
} );

Bien sûr, la variable "colour" est défini en tête de javascript... j'ai vérifié !

et ici,
Je n'ai pas trouvé...
ni pour le "+",
ni pour le bouton "détails" !!!
... que ce soit dans le "else"
... ou après le "if" !
Rien n'y fait !!!

		$('#example tbody td img').live('click', function () {
			var nTr = $(this).parents('tr')[0];
			if (oTable.fnIsOpen(nTr)) {
				this.src = "images/recherche/detailouvrir.gif";
				oTable.fnClose( nTr );
			} else {
				this.src = "images/recherche/detailfermer.gif";
				oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
			}
			$('#example tbody tr').each( function() {
				var el = $(this);
				if( el.hasClass('odd') ){
					el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
				}
			})
		} );
		
		$('#example tbody td .voir').live('click', function () {
			var nTr = $(this).parents('tr')[0];
			if (oTable.fnIsOpen(nTr)) {
				$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'images/recherche/detailouvrir.gif');
				oTable.fnClose( nTr );
			} else {
				$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'images/recherche/detailfermer.gif');
				oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
			}
			$('#example tbody tr').each( function() {
				var el = $(this);
				if( el.hasClass('odd') ){
					el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
				}
			})
		} );

Me reste plus "que" :
- Supprimer le onmouseover sur toutes les lignes détail...
Modifié par jytest (22 Apr 2013 - 22:04)

jytest

23 Apr 2013 à 09:49

Pour les backgrounds,
ne serait-il pas plus simple de "choper" le background
ou de la cellule qui contient l'image
ou la cellule qui contient le bouton "détails",
et de l'imposer dans la chaine "sOut" ?
... un peu comme ma variable "colour" (qui n'est pas bien pointée) ?


		sOut = "<table cellpadding='5' cellspacing='0' border='0' style='margin:7px 0px 7px 0px; padding-left:0px; background-color:"+colour+";'>";
//		sOut += "<tr><td width='70'></td><td width='120'></td><td width='180'></td><td width='120'></td><td width='180'></td><td width='100'></td></tr>";
		sOut += "<tr><td rowspan='9' valign='top' align='center' style='width:70px; background-color:#FFFFFF;'>";
		sOut += "<img src='"+image+"' width='63' height='63' alt='recherche diamant'>";
		sOut += "</td>";
		sOut += "<td>Référence :</td><td>"+aData[9]+"</td><td>Profondeur % :</td><td>"+aData[14]+"</td>";
		sOut += "<td valign='bottom' style='width:60px; text-align:center;' rowspan='9'>";
		sOut += "<a href='boutique.php'>Ajouter<br>au Panier<br><img src='images/boutique/panier.gif' alt='ajouter' name='ajouter' width='26' height='20' id='ajouter'></a>";
		sOut += "</td>";
		sOut += "</tr>";
		sOut += "<tr><td style='width:80px;'>Poids (carats) :</td><td style='width:130px;'>"+aData[2]+"</td><td style='width:80px;'>Table % :</td><td style='width:130px;'>"+aData[15]+"</td></tr>";
		sOut += "<tr><td>Qualité de taille :</td><td>"+aData[1]+"</td><td>Rondiste :</td><td>"+aData[16]+"</td></tr>";
		sOut += "<tr><td>Symétrie :</td><td>"+aData[10]+"</td><td>Colette :</td><td>"+aData[17]+"</td></tr>";
		sOut += "<tr><td>Polissage :</td><td>"+aData[11]+"</td><td>Dimensions :</td><td>"+aData[18]+"</td></tr>";
		sOut += "<tr><td>Couleur :</td><td>"+aData[3]+"</td><td>Rapport Long/Larg :</td><td>"+aData[19]+"</td></tr>";
		sOut += "<tr><td>Pureté :</td><td>"+aData[5]+"</td><td>Prix/carat :</td><td>"+aData[20]+" €</td></tr>";
		sOut += "<tr><td>Fluorescence :</td><td>"+aData[12]+"</td><td>Prix habituel</td><td>"+aData[21]+" €</td></tr>";
		sOut += "<tr><td>Certificat :</td><td>"+aData[13]+"</td><td>Prix Celinni</td><td>"+aData[8]+" €</td></tr>";
		sOut += '</table>';


$('#example tbody td img').live('click', function () {
//			colour = this.style.backgroundColor + '';
	var nTr = $(this).parents('tr')[0];
	if (oTable.fnIsOpen(nTr)) {
		this.src = "images/recherche/detailouvrir.gif";
		oTable.fnClose( nTr );
	} else {
		this.src = "images/recherche/detailfermer.gif";
		oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
	}
//			$('#example tbody tr').each( function() {
//				var el = $(this);
//				if( el.hasClass('odd') ){
//					el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
//				}
//			})
} );

$('#example tbody td .voir').live('click', function () {
//			colour = this.style.backgroundColor + '';
	var nTr = $(this).parents('tr')[0];
	if (oTable.fnIsOpen(nTr)) {
		$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'images/recherche/detailouvrir.gif');
		oTable.fnClose( nTr );
	} else {
		$(this).parents('tr:eq(0)').find('td:eq(0) img').attr('src' , 'images/recherche/detailfermer.gif');
		oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
	}
//			$('#example tbody tr').each( function() {
//				var el = $(this);
//				if( el.hasClass('odd') ){
//					el.next('tr').find('td:eq(0)').css({'background':'#F5F5F5'});
//				}
//			})
} );

Modifié par jytest (23 Apr 2013 - 09:51)

Sujet clos