Discussion :

[Rifton007]

Bonjour et merci d'avance pour votre aide.

Le projet consiste à créer un formulaire de réservation.
Et d'inclure dans celui-ci un tableau dans le quel le visiteur peut ajouter les colis qu'il souhaite envoyé.

• Poids du colis inf. ou sup. à 50kg
• Un commentaire en particulier
• Et si le colis doit être envoyé par transport réfrigéré ou pas.

Le visiteur, ajoute et peu aussi supprimer les colis du tableau.

Aussi, il existe 5 type de véchicule pour le transport.
Si un des colis ajouté est un colis au froid, cela impose le choix du camion réfrigéré.

Mais au niveau du code j'ai vraiment le sentiment de faire du bricologe.

• Les cellules ajouté en JS, ne se conforme pas au CSS appliqué.
• Quel est la meilleur méthode pour manipuler ce tableau? En Arry ou fichier externe. A savoir que ce tableau doit être récupérer pour l'envoie finale du formulaire.

Voici l'adresse de la page en quesiton
http://www.ktsgroup.be/temp/reservation.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
	function AddRow(){
		var rowCount = document.getElementById("table_order").getElementsByTagName("TR").length;
		var newRow = document.getElementById("table_order").insertRow(rowCount);
		var frm_selectedIndex = document.getElementById("frm_weightPack").selectedIndex;
		var frm_comAddpack = document.getElementById("frm_comAddpack").value;
		var weightPack;
		var comAddpack;
		var icePack = new Array();;
		var newCell = newRow.insertCell(0);
		newCell.innerHTML = rowCount + 1 ;
		newCell = newRow.insertCell(1);
		if(frm_selectedIndex == 1){weightPack = "> 50 kg"} else {weightPack = "< 50 kg"}
		newCell.innerHTML = weightPack;
		newCell = newRow.insertCell(2);
		if(frm_comAddpack == ""){comAddpack = "Aucun commentaire"} else {comAddpack = frm_comAddpack}
		newCell.innerHTML = comAddpack;
		newCell = newRow.insertCell(3);
		if(document.getElementById("frm_icePack").checked){
			icePack[0] = "<img src=\"images/ico/icon_ice.gif\" width=\"18\" height=\"17\" alt=\"icône produit\" />";
			icePack[1] = "1"
			} else {
				icePack[0] = ""
				icePack[1] = "0"}
		newCell.innerHTML = icePack[0];
		Array_package.push(weightPack,comAddpack,icePack[1]);
}

Merci de votre aide

[Golgotha]

Bonjour

Je ne connaissais pas insertRow , mais j'ai l'impression que ça sort d'un autre temps

Si j'ai bien compris, insertRow ne te permettra pas facilement d'ajouter class ou id sur la node que tu ajoute.

Pour ma part j'utiliserais jQuery mais ton projet a l'air d'être déjà assez avancé et n'utilise pas cette librairie.

[Rifton007]

Merci Golgotha,

mais j'ai l'impression que ça sort d'un autre temps

J'ignorais totalement que jQuery en était capable de cela.
Si je l'utise pour ma page index, mais je ne le maitrise pas du tout.
Je vais donc explorer cette piste.

Encore merci,

[NoSmoking]

Bonjour,
tu peux également regarder l'approche faite dans cette discussion, Ajout/duplication de ligne à un tableau

[Rifton007]

Merci pour vos réponses, mais j'ai suivis la piste de Golgotha.
J'ai passer une nuit blanche et je suis supris de l'efficacité du jQuery.
J'ai assez bien avancé, mais j'ai rencontré qq problémes que je ne parvient pas à résoudre.

1) J'utlise une fonction pour créer des bgcolor en alternance pour les<tr>
via la fonction zebraRows

Mais quand je supprime un row (cliquer sur la poubelle).
Malgré que je relance la fonction zebraRows aprés la suppresion, l'alternance des bgcolor n'est plus rescpeté.

Voir zebraRows et suppression d'un colis dans mon code

2) Cinq <li> contenant des icones de véhicules. Je souhaiterais disbled tout les <li> et leurs contenue (label et input) à l'exception du dernier, dans le cas ou un colis au froid existe dans la commande.
Je parviens à disabled les label et les input mais pas les <li> parent.

Voir ligne 205 pour HTML, http://www.ktsgroup.be/temp/temp.html
Voir Vérifie condition colis réfrigiré dans mon code ligne 27

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
//-----------------------------------------------------
//				zebraRows
//-----------------------------------------------------
 
function zebraRows(selector, className)
{
  $(selector).removeClass(className).addClass(className);
}
 
//-----------------------------------------------------
//				suppression d'un colis
//-----------------------------------------------------
function removeRow(index){
 
	var indexRow =  $('#table_order tbody tr ').length
	$(index).closest('tr').remove();
	notice();
 
	for (i=0; i<indexRow; i++){
 
		$('#table_order tbody tr:eq('+i+') td:first').text(i+1);
	}
	zebraRows('tbody tr:odd td', 'odd');
	check_icePack()
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
//-----------------------------------------------------
//				Vérifie condition colis réfrigiré
//-----------------------------------------------------		
 
function check_icePack(){
	var indexRow =  $('#table_order tbody tr ').length
	if (indexRow !==0){
		for (i=0; i<indexRow; i++){
			if($('#table_order tbody tr:eq('+i+') td:last').html() !== ''){
				on_icePack();
				break;
				} else{off_icePack();}
			}
		} else {off_icePack();}	
	}
 
//Tout les véhicules disponibles
function off_icePack(){
	$('.icon_car , .icon_car input , .icon_car label').attr('disabled' , false);	
	$('.icon_car').css({'background-color':'#DCDCDC'});
	$('#li_car1').css({'background-color':'red'});
	$('#icon_car1').attr('checked', true);
}
//Un véhicule diponible
function on_icePack(){
	$('icon_car , .icon_car input , .icon_car label').not('#li_car5 label, #li_car5 input').attr('disabled' , true);	
	$('.icon_car').not('#li_car5').css({'background-color':'#F0F0F0','cursor':'cross'});
	$('.icon_car').css({'cursor':'help'});
	$('#li_car5').css({'background-color':'red'});
	$('#icon_car5').attr('checked', true);
}

En vous remerciant encore,

[Golgotha]

Bonjour,

jQuery et très pratique (et très puissant).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function zebraRows(selector, className)
{
  $('#table_order tbody tr td').removeClass(className)
  $(selector).addClass(className);
}

Mais je te conseil plutôt de mettre ta class odd sur la ligne (tr).

[Rifton007]

Thanks, Golgotha.

Juste un soucis avec c fameux <li class="icon_car"> qui ne se disabled pas.
Pourtout les input et les label se trouvent de ces <li> se désactive bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('icon_car , .icon_car input , .icon_car label').not('#li_car5 label, #li_car5 input').attr('disabled' , true);

D'aprés ce que j'ai pu lire, le <li> se disabled bien, mais pas son onClick="", possible ?
J'ai tenter un .bind et .unbind, mais je n'y suis pas parvenu, peut-être que je m'y suis mal pris.

$document.ready, où je bind les <li> avec la procédure.
Et je unbind au moment du disabled.

Mon raisonnement est correcte ?

Merci,