[Résolu] <tr> caché/visible ?

Question

jytest

30 Jul 2011 à 10:51

Bonjour,

Pouvez-vous m'aider ?
J'ai un souci de "visible/caché" avec mes <tr>
que j'ai pourtant identifié par des id.
A la lecture, vous verrez qu'il s'agit de listes liées.

Voilà mon souhait :
Quand on a sélectionné une option dans la 1re liste,
l'image d'attente s'affiche à droite du 1er select et aussi afficher que le <tr> suivant.
Et ainsi de suite.
De plus, je poursuis mon exemple,
supposons qu'on soit dans le 6e select (dans le 6e <tr>, donc),
et qu'une envie me vient de modifier mon choix dans le 2e select (cad dans le 2e <tr>),
il faudrait que les choix déjà établis pour les 3e 4e 5e 6e select soit "perdus",
et surtout que les tr03 tr04 tr05 tr06 soient, à nouveau, cachés comme au début du processus
Pour m'aider, voici les codes :


<head>
...
<script type="text/javascript" src="js/oXHR.js"></script>
<script type="text/javascript">
<!--
function request(oSelect,noSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML,noSelect+1);
			document.getElementById("loader0"+noSelect).style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader0"+noSelect).style.display = "inline";
		}
	}
	document.getElementById("tr0"+(noSelect+1)).style.display = "";
	for (i=noSelect+2; i<=9; i++){ 
		document.getElementById("tr0"+noSelect).style.display = "none";
	} 

	xhr.open("POST","php/cat.php?cat="+(noSelect+1),true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send("parent="+value);
}

function readData(oData,noData) {
	var nodes = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("categorie0"+noData);
	var oOption, oInner;
	
	oSelect.innerHTML = "";
	for (var i=0, c=nodes.length; i<c ; i++) {
		oOption = document.createElement("option");
		oInner = document.createTextNode(nodes[i].getAttribute("libelle"));
		oOption.value = nodes[i].getAttribute("id");
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);
	}
}
-->
</script>
</head>


<table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="350"></td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Titre : prix en ligne instantané</td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
        <tr id="tr00">
        <td style="padding:7px;">Document</td>
        <td style="padding-left:5px;">
        	<select id="categorie00" style="width:280px;" onChange="request(this,0);">
            <option value="none">Choisissez, svp !</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY libelle");
				while ($back = mysql_fetch_assoc($query)) {
					echo "\t\t\t\t<option value='".$back['id']."' >".$back['libelle']."</option>\n";		
				}
			?>
            </select>
            <span id="loader00" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr01" style="display: none;">
        <td style="padding:7px;">Descriptif</td>
        <td style="padding-left:5px;">
        	<select id="categorie01" style="width:280px;" onFocus="request(this,1);" onChange="request(this,1);">
            </select>
            <span id="loader01" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr02" style="display: none;">
        <td style="padding:7px;">Format</td>
        <td style="padding-left:5px;">
        	<select id="categorie02" style="width:280px;" onFocus="request(this,2);" onChange="request(this,2);">
            </select>
            <span id="loader02" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr03" style="display: none;">
        <td style="padding:7px;">Papier</td>
        <td style="padding-left:5px;">
        	<select id="categorie03" style="width:280px;">
            </select>
            <span id="loader03" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr04" style="visibility:hidden">
        <td style="padding:7px;">Impression Recto</td>
        <td class="bold" style="padding-left:5px;">
        	<select id="categorie04" style="width:280px;">
            </select>
            <span id="loader04" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
</table>
...

[/i][/i]
Modifié par jytest (31 Jul 2011 - 23:34)

Sujet clos