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

Messages postés
3
Date d'inscription
dimanche 22 septembre 2019
Statut
Membre
Dernière intervention
22 septembre 2019
-
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 = 0

unction 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;;
}

Afficher la suite 

3 réponses

Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51
0
Merci
utilise cloneNode et je t'invite a consulter cette page qui pourrait t’être utile
Commenter la réponse de @karamel
Messages postés
3
Date d'inscription
dimanche 22 septembre 2019
Statut
Membre
Dernière intervention
22 septembre 2019
0
Merci
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.
Commenter la réponse de RogerT_321
Messages postés
3
Date d'inscription
dimanche 22 septembre 2019
Statut
Membre
Dernière intervention
22 septembre 2019
0
Merci
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
Commenter la réponse de RogerT_321