cloner, vider et réindexer les élements d'un row d'une table html

Question

Bonjour
ce que je veux faire ressemble à ce qu'on voit sur un site marchand quand on peut rajouter un produit à la liste des produits mis en panier : 

- un bouton "+/ajouter un produit" crée une ligne suplémentaire avec le même nombre de colonnes
- un bouton "-/supprimer le produit" sur laligne d'un produit fait disparaître la ligne

Voilà ce que je veux réaliser   : 
- je construis une page html avec un tableau statique (table/tr/td) :
   Entête : Qté  | Libellé | Options | Prix
   Ligne 1er article (obligatoire) : 
         input text | Lib   | input radio & select | prix calculé
   Ligne 2nd article (obligatoire) : 
         idem
   bouton "Ajouter un article"
   Total

- je clone le dernier élément du tableau, juste au-dessus du bouton  (input text /input radio / select / prix affiché)
- je vide ses valeurs et j'indexe ses tag qte radio et select
- j'insère à l'index du bouton "Ajouter" qui doit descendre d'un cran

Questions : 
- dans une 'table' peut-on ainsi cloner un 'row', en modifier les id des éléments de chaque 'cell' ?
- peut-on faire dans une 'table' comme avec des div ou  autre (avec insertRow...), ou vaut-il mieux choisir des div ?
- cloner une ligne et la nettoyer semble attractif mais ne serait-il pas plus simple de créer les élements d'une ligne de zéro ?

PS : quand vous développez un programme js, comment vérifiez-vous son avancement et les valeurs prises par les variables et les éléments ? (pour l'instant je place des alert("bla bla") )

Merci

Les deux fonctions js en chantier ont la tête suivante :

var cnt = 0unction add() {    cnt = cnt + 1;    var table = document.getElementById("table01");    var row = document.getElementById("prod01");    var clonerow = row.cloneNode(true);    // vider les valeurs et réindexer les boutons radio    var InputType = clonerow.getElementsByTagName("input");    for (var i = 0; i < InputType.length; i++) {        if (InputType[i].type == 'checkbox') {            InputType[i].checked = false;        } else if (InputType[i].type == 'radio') {            InputType[i].setAttribute ("name", "tg" + cnt);            InputType[i].value = '1';        }    }    // modifier le name du select cloné : comment ?    // ajouter un bouton sur la ligne qui la supprime    table.appendChild(clonerow);}function del(x) {    // supprimer 'this'    cnt = cnt -1;;}

@karamel · Answer

utilise cloneNode et je t'invite a consulter cette page qui pourrait t’être utile

RogerT_321 · Answer

Cad que je peux faire exactement la même chose avec les fonctions génériques ou celles de table (insertRow()...) ?
Je pense avoir compris les fonctions de base pour créer/"appender"/modifier/supprimer un élément ou ses attributs (createElement, setAttribute...).
Comme je suis quasiment débutant en js, là où je me tords le cerveau c'est sur ce point :
j'hésite entre cloner un row puis modifier TOUTES les valeurs de id, name (input texte ou radio, select (avec beaucoup de valeurs !) et en créer de zéro.
Sachant que chaque objet input/texte input/radio, select doit avoir un name unique puisque je dois envoyer un formulaire avec les valeurs recueillies.

Egalement, pour savoir le nombre de rows ajouté, je compte utiliser une variable globale 'cnt'. J'ai lu qu'il vaut mieux éviter les var globales, mais il faut bien que j'en utilise une. 
Ou alors je dois parser les lignes pour identifier le nombre total d'élément.
C'est quoi la meilleure pratique ?
Merci.

RogerT_321 · Answer

PS : 
pour savoir ce qui se passe dans un script, je place des alert("truc  : " + truc) ou des console.log (...).
C'est un peu primitif, et quand une déclaration erronée bloque le programme, il faut fouiller et tâtonner.
Je viens de découvrir la fonction debugger qui interrompt le script.

A part la console et le debugger (microscopiques !) du navigateur, y a-t-il un éditeur (IDE) pour développer un script js et l'exécuter pas à pas en examinant les valeurs des variables et objets ?
Merci

Cloner, vider et réindexer les élements d'un row d'une table html

3 réponses

Votre réponse

Discussions similaires