begin process at 2012 05 29 12:06:31
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

insertion d'un tableau html avec des input en js


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

insertion d'un tableau html avec des input en js

vendredi 2 avril 2010 à 16:00:26 | insertion d'un tableau html avec des input en js

jagogordonne

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>
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>
<body id="body1" onload = "start()"/>
<input type="button" id="arbre" name="arbre" value="arbre" onclick="start()"/>
<input type="button" id="affich_cellule" name="affich_cellule" value="affich11" onclick="affich()"/>
<input type="text" id="nombre_arbre_prerempli" name="nombre_arbre_prerempli" style="width:150px" maxlength="35"/>
</body>
</html>

Merci.
vendredi 2 avril 2010 à 16:41:39 | Re : insertion d'un tableau html avec des input en js

PetoleTeam

Membre Club
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
Code Javascript :
//-- 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)
vendredi 2 avril 2010 à 17:00:33 | Re : insertion d'un tableau html avec des input en js

jagogordonne

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
vendredi 2 avril 2010 à 17:11:35 | Re : insertion d'un tableau html avec des input en js

PetoleTeam

Membre Club
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)
mardi 6 avril 2010 à 10:40:01 | Re : insertion d'un tableau html avec des input en js

jagogordonne

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 !
Code Javascript :
<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.
mardi 6 avril 2010 à 13:31:21 | Re : insertion d'un tableau html avec des input en js

jagogordonne

Finalement il fallait créer un div plutôt qu'ajouter au formulaire
Code Javascript :
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
Code Javascript :
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 ?
Code PHP :
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 ?
mardi 6 avril 2010 à 22:23:20 | Re : insertion d'un tableau html avec des input en js

PetoleTeam

Membre Club
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
Code Javascript :
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)
mercredi 7 avril 2010 à 10:27:48 | Re : insertion d'un tableau html avec des input en js

jagogordonne

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 ?

Code Javascript :
<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>
mercredi 7 avril 2010 à 18:21:20 | Re : insertion d'un tableau html avec des input en js

PetoleTeam

Membre Club
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
Code Javascript :
O_input.Lig = j;
O_input.Col = i;
O_input.onkeyup = function(){
    Volume( this.Lig, this.Col)
  };

;O)
vendredi 9 avril 2010 à 14:34:17 | Re : insertion d'un tableau html avec des input en js

jagogordonne

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 !!!

1 2

Cette discussion est classée dans : input, élément, document, body, appendchild


Répondre à ce message

Sujets en rapport avec ce message

Sous menu [ par jeff_the_lifeguard ] J'aimerai savoir comment pourrais-je faire pour ajouter un sous menu à un menu clique droit. Voice le code#menu{position:absolute;width:155px;border:3 appendChild [ par bultez ] buldans le script suivantappendChild ajoute bien la "ligne 2"mais font et br .. pas pris en compte : s'affichent comme du texteje fais quelle erreur ? Redimenssionnement proportionnel d'une fenêtre [ par lacouine ] Bonjour,Mon problème est simple mais à la fois compliqué... Cela fait 2 jours que je planche dessus sans pouvoir la parade. Si quelqu'un pouvait m'aid pb de neige qui ne tombe pas [ par Mr spud ] bonjour.....j'ai pris le code de neige en hiver feuille en automne et j'ai un message d'erreur quand je regarde la page....."objet requis"voici la lig script "Imprimer une zone dans une page web" [ par JPhL ] Bonsoir à tous,Je voudrais imprimer un cadre d'une page web. J'ai donc mis ce script dans la zone à imprimer. Tout fonctionne extra sauf que ma page i utilisation de createTextRange() [ par rttb ] Salut,Mon probleme est le suivant :J'utilise : window.document.body.createTextRange()Cela fonctionne bien mais c'est le 'body' qui me perturbe, en eff Problème avec document.body.clientHeight [ par Sb01 ] Salut à tous,J'aimerai positionner un calque dans ma page en fonction de la résolution de l'écran. Pour la largeur j'utilise la propriété document.bod Evènement onResize [ par initnocsib ] Je souhaite afficher plus ou moins de photos dans un bandeau en fonction de la taille de la fenêtre. voici le code : if (document.body) { var larg = Petit souci avec les Dom [ par mikl74 ] Salut a tous, j'ai un petit problème avec un script utilisant les dom, en faite , je souhaite créer un tableau ou je peux ajouter des ligne grâce au Passer une variable entre deux composants... [ par WhiteMagus ] Salut.Je repète un différent post qui n'a pas eu de réponse. Mais c'est vraiment important et très urgent. Si quelqu'un voit une soltion à mon problèm


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,889 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales