FORUM MP | Javascript : tableau dynamique en JS

COMMUNAUTE MP

Identifiez vous ...

DOMAINE MP

Bavardages

Langages Généraux

Langages Web

Langages DotNet

Autres langages

Dev. Jeux Video

Sécurité

Sys. Exploitation

Graphismes

Logiciels

Réseaux

Bases de données

Méthodologies

Emplois High-tech

Aide juridique

Articles juridiques

FORUM

CHAT MP IRC

Votre pseudo ...

Srv: irc.moteurprog.com

Chan: #MoteurProg

PARTICIPER

Plus de 3500 emplois.

Visiteur MP

tableau dynamique en JS
	Forum : JAVASCRIPT Sous Catégorie : Aucune Type du sujet : Sujet Normale FAQ : FAQ JAVASCRIPT
		SUIVI PAR MAIL INACTIF
		SUJET NON RESOLU
		SUJET ACTIF
		N'APPARTIENT PAS A LA FAQ

PAGE : [1]

FORUM JAVASCRIPT
	Page précedente	Page suivante

radou
Nouveau membre

Inscrit : 02/09/2007
Messages : 3

#142172 Posté le 02/09/07 à 17:04

Bonjour,

Je voudrai créer un tableau dynamique en javascript avec un bouton qui insère des lignes et un autre dans chaque ligne créee qui supprime une ligne.

J\'ai ce code là :

// Tableau /* * Utilisation : * 1. Créer un tableau avec la proprieté class=\"dTable\" (Dynamic TABLE) * 2. Le tableau doit être standard : il contenir un <thead>, un <tbody> et un <tfoot> * et utiliser à bon escient les <td> et <th>. * 3. La première ligne du tbody sera utilisée comme ligne de réference. * Elle sera clonée pour en ajouter de nouvelle. Elle ne sera pas affichée. */ window.onload = dtableInit; /* initialise le script */ function dtableInit() { var table = document.getElementsByTagName(\'TABLE\'); for ( var i = 0; i < table.length; i++ ) { // on récupère tous les tableaux dynamiques if ( table[i].className = \'dTable\' ) { var tbody = table[i].tBodies[0]; var newTr = tbody.rows[0].cloneNode(true); // on masque la première ligne du tbody (la ligne de reference) tbody.rows[0].style.display = \'none\'; // on en ajoute une tbody.appendChild(newTr); } } } /* trouve le tag \"parentTagName\" parent de \"element\" */ function getParent(element, parentTagName) { if ( ! element ) return null; else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() ) return element; else return getParent(element.parentNode, parentTagName); } /* ajoute une ligne */ function addLigne(link) { // 1. récuperer le node \"TABLE\" à manipuler var td = link.parentNode; var table = getParent(td,\'TABLE\'); // 2. on va manipuler le TBODY var tbody = table.tBodies[0]; // 3. on clone la ligne de reference var newTr = tbody.rows[0].cloneNode(true); tbody.appendChild(newTr); if ( document.all ) // pour IE newTr.style.display = \"block\"; else newTr.style.display = \"table-row\"; // pour Gecko } /* supprimer une ligne */ function delLigne(link) { // 1. récuperer le node \"TABLE\" à manipuler var td = link.parentNode; var table = getParent(td, \'TABLE\'); // 2. récuperer le TBODY var tbody = table.tBodies[0]; // 3. Supprimer le TR tbody.removeChild(getParent(td, \'TR\')); }

le code HTML est le suivant

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"fr\" lang=\"fr\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" /> <meta name=\"robots\" content=\"noindex, follow\" /> <title>The ASW :: Tableaux dynamiques :: Exemple 3</title> <style type=\"text/css\"> table { border : 2px solid #666; border-collapse : collapse; } table thead th { background : #369; border-bottom : 2px solid #666; color : #fff; } table tbody td { border : 1px solid #ccc; padding : 5px 2px; } </style> <script type=\"text/javascript\" src=\"dtable.js\"> </script> </head> <body> <table class=\"dTable\"> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> <th>Colonne 4</th> <th>Colonne 5</th> </tr> </thead> <tfoot> <tr> <th colspan=\"5\"><a href=\"#\" onclick=\"addLigne(this); return false;\">Ajouter une ligne</a></th> </tr> </tfoot> <tbody> <tr> <td><input type=\"text\" name=\"champ1[]\" /></td> <td><input type=\"text\" name=\"champ2[]\" /></td> <td><input type=\"text\" name=\"champ3[]\" /></td> <td><input type=\"text\" name=\"champ4[]\" /></td> <td><a href=\"#\" onclick=\"delLigne(this); return false;\">Supp</a></td> </tr> </tbody> </table> </body> </html>

ce code marche bien, si je le teste tout seul , par contre quand je l\'intègre dans une autre page avec mise en forme et en changeant quelques petits details il marche pas, explication : quand j\'ajoute des ligne tout va bien, idem quand je supprime une ligne ! MAIS il est sensé, quand je supprime meme la première ligne, d\'en rajouter une quand je clique sur \"ajouter une ligne\", ce qui est le cas quand je le teste tel que présenté par ce code mais quand il est integré dans une autre page il marche plus, il me crée plus la première ligne quand les lignes sont toutes supprimées pourtant la ligne 0 est protégée.

Quelqu\'un pourrait me dire comment faire pour empecher la suppression de la première ligne du tableau comme ça j\'aurais plus ce problème ? en d\'autre termes je peux supprimer n\'importe quelle ligne sauf la première.

Merci beaucoup

HAUT DE PAGE

Publicité

Inscrit : X
Messages : X

#Aucun

HAUT DE PAGE

bul
Membre du club

Inscrit : 26/01/2004
Messages : 965

#142190 Posté le 03/09/07 à 06:14

bonjour,

tu me diras que je ne résoud pas ton souci, mais
pourquoi ne pas utiliser insertRows, deleteRows... ?

tableau.rows.length nombre de lignes tableau.rows[n° ligne].cells.Length nombre de colonnes dans la ligne tableau.insertRow(n° ligne) ajouter une ligne tableau.rows[n° ligne].insertCell(n° colonne) ajouter une colonne dans la ligne tableau.deleteRow(n° ligne) détruire une ligne tableau.rows[n° ligne].deleteCell(n° colonne) détruire une colonne dans la ligne tableau.rows[n° ligne].cell[n° colonne].??? accès à une cellule par exemple : tableau.rows[0].cell[0].style.display tableau.rows[0].cell[0].style.innerHTML ... tableau.rows[n° ligne].on???"=function(){fonction(paramètres);}; ajouter une fonction à une ligne par exemple : tableau.rows[0].onclick=function(){Appel(this);}; tableau.rows[n° ligne].cell[n° colonne].on???"=function() {fonction(paramètres);}; ajouter une fonction à une colonne par exemple : tableau.rows[0].cell[0].onclick=function() {Appel(this);};

ça me semble beaucoup plus simple, c'est compatible...

Cordialement. @+
__________________________
~ mon site ~ m'écrire ~
Laissez une adresse Mail où vous écrire, en évitant les spams
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

HAUT DE PAGE

radou
Nouveau membre

Inscrit : 02/09/2007
Messages : 3

#142193 Posté le 03/09/07 à 08:36

ok merci c possible aussi et c plus simple mais je suis nouveau en JS, si tu peux m'aider ça serai genial

g ce code là

<html> <head> </head> <body> <table id="myTable" border="1"> <tr> <td><font color="#000000" size="1"> <select name="select6"> </select> </font></td> <td><select name="select2"> </select></td> <td><select name="select3"> </select></td> <td><select name="select4"> </select></td> <td><select name="select5"> </select></td> <td><input type="text" name="textfield"></td> <td><p> <textarea name="textfield2"></textarea> </p> <p align="center">Modifications</p> <p align="center"> <textarea name="textarea"></textarea> </p></td> <td><input type="text" name="textfield3"> <input name="button" type="button" onClick="" value="Delete"></td> </tr> </table> <p><br /> <input type="button" onclick="" value="Insert row"> </p> </body> </html>

j'ai besoin de transcrire les options des 4 premiers select (à chaque selection) dans textfield et la longueur du texte du tetfield2 dans textfield3.

mon probleme est que à l'insertion d'une nvelle ligne je voudrai les memes elements et les meme actions mais relatives à la deuxieme ligne (je crois qu'il faut incrementer les "id" !!

tu peux m'aider ?

HAUT DE PAGE


	Page précédente	Page suivante
FORUM JAVASCRIPT

PAGE : [1]

.: Site Web développé par Julien Pichot et l'équipe MPWG avec www.evolvia-web.com :.