Posez votre question Signaler

Insertion d'un tableau html avec des input en js [Résolu]

Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
 - - Dernière réponse : 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
Javascript / DHTML Posez votre question Signaler
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.
Afficher la suite 

14 réponses

Meilleure réponse
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
3
Merci
<?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 !!!!

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 206 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jagogordonne
Signaler Commenter la réponse de PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 11
0
Merci
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)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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
Commenter la réponse de jagogordonne
Signaler Commenter la réponse de PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 11
0
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.

;O)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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.
Commenter la réponse de jagogordonne
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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 ?
Commenter la réponse de jagogordonne
Signaler Commenter la réponse de PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 11
0
Merci
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)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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>
Commenter la réponse de jagogordonne
Signaler Commenter la réponse de PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 11
0
Merci
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)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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 !!!
Commenter la réponse de jagogordonne
Signaler Commenter la réponse de PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 11
0
Merci
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)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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
Commenter la réponse de jagogordonne
Signaler Commenter la réponse de PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 11
0
Merci
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)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de jagogordonne
Messages postés
29
Date d'inscription
mardi 9 décembre 2008
Statut
Membre
Dernière intervention
7 janvier 2011
0
Merci
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
Commenter la réponse de jagogordonne
Répondre Posez votre question