Conception, manipulation tableau HTML en Javascript

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:

---

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

Bonjour

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

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.

Merci Golgotha,

Citation:

---

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

---

:mouarf::mouarf:

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,

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

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:

---

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:

---

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,

Bonjour,

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

Code:

---

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).

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:

---

$('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,