Insertion d'un tableau html avec des input en js [Résolu]
jagogordonne29
Messages postés mardi 9 décembre 2008Date d'inscription
7 janvier 2011
Dernière intervention
-
2 avril 2010 à 16:00 - Dernière réponse : jagogordonne29
Messages postés mardi 9 décembre 2008Date d'inscription
7 janvier 2011
Dernière intervention
- 16 avril 2010 à 16:27
Je dois pas être très loin de la fin cependant mon code ne marche pas sous IE si quelqu'un pouvait m'aider ?
Et il doit me manquer une ligne du type "form.appendChild(body)" pour le mettre dans mon formulaire mais mon formulaire éxiste déjà donc comment je déclare "form" ?
<html>
<head>
<title>Code de démonstration</title>
<script>
function start() {
// récupère une référence vers l'élément body
var body = document.getElementsByTagName("body")[0];
var nbligne = document.getElementById("nombre_arbre_prerempli").value;
// crée un élément <table> et un élément <tbody>
table = document.createElement("table");
tablebody = document.createElement("tbody");
// création des cellules
for(var j = 0; j < nbligne; j++) {
// crée une ligne de tableau
var row = document.createElement("tr");
for(var i = 0; i < 5; i++) {
// Crée un élément <td> et un input, on place le input
cell = document.createElement("td");
var input = document.createElement("input");
input.setAttribute ("id","menu"+j+i)
input.setAttribute ("type","text");
//texte = document.createTextNode("la cellule est ligne "+j+", colonne "+i);
cell.appendChild(input);
row.appendChild(cell);
}
// ajoute la ligne à la fin du corps du tableau
tablebody.appendChild(row);
}
// place <tbody> dans l'élément <table>
table.appendChild(tablebody);
// ajoute <table> à l'élément
body.appendChild(table);
// définit l'attribut border du tableau à 2
table.setAttribute("border", "2");
}
function affich() {
alert ("on rentre dans la fonction");
var cellule = document.getElementById("menu11").value;
alert (cellule);
}
</script></head>
Bonjour,
le code de démo ne marche pas sur grand chose.
Il est préférable d'utiliser les méthodes
insertRow pour ajouter une ligne d'une table
et
insertCell pour ajouter une cellule à ta ligne
voila à quoi pourrait ressembler ta fonction
//-- variables
var NbLig = 10;
var NbCol = 10;
//-- Destination
O_Dest = document.body;
//-- Creation de la table
var O_Table = document.createElement('table');
//-- Ajout de la table
O_Dest.appendChild(O_Table);
//-- Creation des lignes
for (var lig = 0; lig < NbLig; lig++) {
var O_Row = O_Table.insertRow(-1);
//-- Creation des colonnes
for (var col = 0; col < NbCol; col++) {
var O_Cell = O_Row.insertCell(-1);
//-- Creation d'un texte
O_Text = document.createTextNode("ligne " + lig + ", colonne " + col);
//-- Ajout du texte
O_Cell.appendChild(O_Text);
}
}
Nota :
évites d'utiliser des mots réservés pour le nom de tes fonctions et variables comme start, input etc...
;O)
Merci de m'aider mais j'ai un problème avec ta réponse. Ensuite ce tableau va contenir des données que je souhaite inséré dans ma table mysql et il faudrait que j'ai un Id unique pour pouvoir les exploiter ? C'est pour çà que j'était partie sur cette solution.
Merci
le code mis est un exemple d'utilisation des méthodes, mais très proche de ton besoin.
Remplaces l'ajout d'un texte par l'ajout d'un INPUT et affecte une ID comme tu l'as fait dans ton code original.
J'ai adapté mon code, sa fonctionne très bien seulement je n'arrive pas à l'intégré à mon formulaire, j'ai tenté de mettre un Id dessus mais je ne pense pas que ce soit la meilleur solution !
<script>
function remp_arbre() {
// Declaration
var O_form = document.getElementById("saisie_abattage").value;
var nbligne = document.getElementById("nombre_arbre_prerempli").value;
// destination
O_dest = document.body;
O_form.appendChild(O_dest);
// création de la table
var O_table = document.createElement("table");
//Ajout de la table
O_dest.appendChild(O_table);
// création des ligne
for (var j = 0; j < nbligne; j++) {
// crée une ligne de tableau
var O_row = O_table.insertRow(-1);
//Création des colonnes
for (var i = 0; i < 5; i++) {
// Crée un élément input
var O_cell = O_row.insertCell(-1);
var O_input = document.createElement("input");
O_input.setAttribute ("id","menu"+j+i)
O_input.setAttribute ("type","text");
O_cell.appendChild(O_input);
}
}
}
</script>
Finalement il fallait créer un div plutôt qu'ajouter au formulaire
function remp_arbre() {
// Declaration
var O_body = document.getElementById("div_arbre");
var nbligne = document.getElementById("nombre_arbre_prerempli").value;
// création de la table
var O_table = document.createElement("table");
//Ajout de la table
O_body.appendChild(O_table);
// création des ligne
for (var j = 0; j < nbligne; j++) {
// crée une ligne de tableau
var O_row = O_table.insertRow(-1);
//Création des colonnes
for (var i = 0; i < 5; i++) {
// Crée un élément input
var O_cell = O_row.insertCell(-1);
var O_input = document.createElement("input");
O_input.setAttribute ("id","menu"+j+i)
O_input.setAttribute ("type","text");
O_cell.appendChild(O_input);
}
}
}
Seulement une chose me dérange lorsque j'apelle une cellule grâce à un bouton ça marche
function affich() {
alert ("on rentre dans la fonction");
var cellule = document.getElementById("menu11").value;
alert (cellule);
}
Mais ça ne fonctionne pas lorsque je fais un submit sur mon formulaire ?
Bonjour,
aucune raison de ne pas pouvoir intégrer les lignes dans une FORM, surement une erreur dans le code ou la récupération de l'objet form
var O_form = document.getElementById("saisie_abattage").value;
var nbligne = document.getElementById("nombre_arbre_prerempli").value;
// destination
O_dest = document.body;
O_form.appendChild(O_dest);
// création de la table
ce que tu as écris ci dessus c'est n'importe quoi...
autre point pour que les variables soient transmise sur un submit il faut qu'elles aient un NAME.
;O)
Bonjour,
oui je sais c'était n'importe quoi le formulaire mais je me suis vite ratrapé en mettant un DIV :)
sinon je souhaiterais mettre des fonctions sur mes collonnes j'ai éssayer mais je récupère toujours la même valeur dans ligne et collone, je ne vois pas pourquoi ?
<script>
function remp_arbre() {
// Declaration
var O_body = document.getElementById("div_arbre");
var nbligne = document.getElementById("nombre_arbre_prerempli").value;
// création de la table
var O_table = document.createElement("table");
//Ajout de la table
O_body.appendChild(O_table);
// création des ligne
for (var j = 0; j < nbligne; j++) {
// crée une ligne de tableau
var O_row = O_table.insertRow(-1);
//Création des colonnes
for (var i = 0; i < 5; i++) {
// Crée un élément input
var O_cell = O_row.insertCell(-1);
O_cell.setAttribute ("onkeyup","keyup()");
var O_input = document.createElement("input");
O_input.setAttribute ("id","menu"+j+i)
O_input.setAttribute ("name","menu"+j+i)
O_input.setAttribute ("type","text");
if (i == 2) {
O_input.onkeyup = function() {Volume(j,i)};
}
if (i == 3) {
O_input.onkeyup = function() {Volume2(j,i)};
}
O_cell.appendChild(O_input);
}
}
}
function Volume(ligne,colonne) {
alert (ligne);
alert (colonne);
var L =document.getElementById('longueur_prerempli').value;
var C =document.getElementById('circonference_prerempli').value;
var V = "";
V = ((0,079578*(C*C)*L)/1000000);
V=(V.toFixed(3));
document.getElementById('volume_prerempli').value=V;
}
function Volume2(ligne,colonne) {
alert (ligne);
alert (colonne);
var L =document.getElementById('longueur_prerempli').value;
var D =document.getElementById('diametre_prerempli').value;
var V = "";
V = ((0,079578*((D*Math.PI)*(D*Math.PI))*L)/1000000);
V=(V.toFixed(3));
document.getElementById('volume_prerempli').value=V;
}
</script>
Bonjour,
tu es en présence d'un problème bien connu, au moment ou la fonction va s'exécuter les paramètres j et i ne seront plus ce qu'il étaient au moment de la création de la fonction.
Une solution consiste à ajouter une propriété à l'objet et à l'utiliser dans la fonction, ce qui pourrait donner cela
Salut,
Merci maître PetolTeam une dernière question avant de fermer ce sujet :
Comment injecter mes données dans la base sachant que le name est menu[i][j]
j étant le nombre de ligne
i étant le nombre de colonne
ex:
menu4980 -> 499lignes 1er collonne ->N°arbre
menu4981 -> 499lignes 2eme collonne ->Longueur
menu4982 -> 499lignes 3eme collonne ->Circonférence
menu4983 -> 499lignes 4eme collonne ->Diamètre
menu4984 -> 499lignes 5eme collonne ->Volume
Si quelqu'un pouvait m'orienter sur la façon de traiter ces données avant le insert en php ?
je pense que je vais posé cette question dans l'espace php en tout cas merci à toi !!!
Bonjour,
Je pense qu'il serait préférable que tu ne mettes des nom sous le forme
menu_498_0 ...etc...
de la sorte tu pourras récupérer aisément le champ avec une méthode du style split coté PHP
Mon arbre abattu je le passe en POST grâce au name de mon formulaire je le fabrique avant en javascript grace a toi et sinon
$Tableau['menu'.$i.'1']=
$_POST['menu'.$i.'1']=
$_POST['menu'.mon_nombre_de_ligne.'1']=
$_POST['menu'.mon_nombre_de_ligne.'Collone1']=
et grace au . je comcataine le tout et j'obtient le nom de ma cellule
