Insertion d'un tableau html avec des input en js

Résolu
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011 - 2 avril 2010 à 16:00
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011 - 16 avril 2010 à 16:27
Salut à tous,

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>





</html>

Merci.

14 réponses

jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
12 avril 2010 à 16:11
<?php
for ($i = 0; $i < $arbre_abattu; $i++) {
$Num_arbre=($Tableau['menu'.$i.'0']);
$longueur=($Tableau['menu'.$i.'1']);
$circonference=($Tableau['menu'.$i.'2']);
$diametre=($Tableau['menu'.$i.'3']);
$volume=($Tableau['menu'.$i.'4']);
$req_ins_2="INSERT INTO $bdd.`tbl_arbre` VALUES (
NULL,'$Num_arbre','$longueur','$circonference','$diametre','$volume','$suivie','$num_lot','$num_abattage')";
$reponse_ins2 = mysql_query($req_ins_2);
echo mysql_error();
//echo $req_ins2;
}
?>


MERCI PETOL TEAM !!!!
3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 avril 2010 à 16:41
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)
0
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
2 avril 2010 à 17:00
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
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 avril 2010 à 17:11
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.

;O)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
6 avril 2010 à 10:40
Bonjour,

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>


Merci.
0
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
6 avril 2010 à 13:31
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 ?
if(isset($_POST['Submit_x'])){
$Tableau=$_POST;
$message="";
$menu11=($Tableau['menu11']);
if ($menu11=="") {
$message .= sprintf('Error menu11');
}
$num_abattage=($Tableau['num_abattage_prerempli']);
if ($num_abattage=="") {
$message .= sprintf('Error num_abattage');
}
}

$menu11 n'apparait pas dans mes variables POST pourtant il est bien dans mon formulaire ?
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 avril 2010 à 22:23
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)
0
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
7 avril 2010 à 10:27
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>
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
7 avril 2010 à 18:21
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
O_input.Lig = j;
O_input.Col = i;
O_input.onkeyup = function(){
    Volume( this.Lig, this.Col)
  };

;O)
0
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
9 avril 2010 à 14:34
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 !!!
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
10 avril 2010 à 05:59
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
var sz = "menu_489_0";
alert( sz.split('_'));


;O)
0
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
12 avril 2010 à 11:29
Bonjour,

Que pensez-vous de ça ?
<?php
for ($i 0; $i $arbre_abattu; $i++) {
$Num_arbre=($Tableau['menu'.$i.'0']);
$longueur=($Tableau['menu'.$i.'1']);
$circonference=($Tableau['menu'.$i.'2']);
$diametre=($Tableau['menu'.$i.'3']);
$volume=($Tableau['menu'.$i.'4']);
$req_ins_2="INSERT INTO $bdd.`tbl_arbre` VALUES (
NULL,'$Num_arbre','$longueur','$circonference','$diametre','$volume','$suivie','$num_lot','$num_abattage')";
$reponse_ins2 = mysql_query($req_ins_2);
echo mysql_error();
//echo $req_ins2;
}
?>

merci
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
13 avril 2010 à 22:19
Bonjour,
par simple curiosité, je suis une quiche en PHP, à quoi ressemble la chaine que tu réceptionnes et d'où sors tu $arbre_abattu ?

;O)
0
jagogordonne Messages postés 29 Date d'inscription mardi 9 décembre 2008 Statut Membre Dernière intervention 7 janvier 2011
16 avril 2010 à 16:27
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
0
Rejoignez-nous