InnerHTML dans une balise table
Bonjour,
Je n'arrive pas a faire un innerHTML dans une balise Table, auriez-vous déjà rencontré ce problème ??
pazz
Je n'arrive pas a faire un innerHTML dans une balise Table, auriez-vous déjà rencontré ce problème ??
pazz
Configuration: Windows XP Internet Explorer 6.0
13 réponses
-
Bonjour,
tune peux pas faire comme ça:
function NewLigne(){
document.getElementById("monid").innerHTML+="<tr><td>Tache 2</td></tr>";
}
le += ne peux pas rajouter une ligne dans ta table
j'ai déja vu ce forum qq un qui proposait une solution avec new.element en javascript ou qq chose dans ce genre fais une recherche dans ccm
tu as du pôt j'ai retouvé un bout d'exemple justement:
<script language="javascript"> function ajout_ligne(){ var newRow = document.getElementById('matable').insertRow(-1);//-1 insère en derniere ligne //reste a voir comment incrementer Nom_ //par un champ caché dont on lit et incremente la value var newCell = newRow.insertCell(0); newCell.innerHTML = '<input type = "text" name = "Nom_1">'; newCell = newRow.insertCell(1); newCell.innerHTML = '<input type = "text" name = "Prenom_1">'; newCell = newRow.insertCell(2); var ajout='<select class="service" name="activite_1" id="activite">'; ajout+='<option value="">--</option>'; ajout+='<option value="Commerçant">Commerçant</option>'; ajout+='<option value="Profession liberale">Profession libérale</option>'; ajout+='<option value="Artisan">Artisan</option>'; ajout+='<option value="Negoce">Négoce</option>'; ajout+='<option value="Industrie">Industrie</option>'; ajout+='<option value="Autres">Autres</option>'; ajout+='</select>'; newCell.innerHTML =ajout; } </script> <form> <table id="matable"> <tr> <td>Nom</td> <td>Prenom</td> <td>Fonction</td> </tr> <tr> <td><input type = "text" name = "Nom_1"></td> <td><input type = "text" name = "Prenom_1"></td> <td> <select class="service" name="activite_1" id="activite"> <option value="">--</option> <option value="Commerçant">Commerçant</option> <option value="Profession liberale">Profession libérale</option> <option value="Artisan">Artisan</option> <option value="Negoce">Négoce</option> <option value="Industrie">Industrie</option> <option value="Autres">Autres</option> </select></td> </tr> <!--Lorsque on clique sur le bouton 'nouveau' une ligne s'ajoute en bas du tableau--> </table> <input type="button" value="Ajouter une personne" onClick="ajout_ligne();" > </form> -
je ferais ça plutot avec un <div> et tu écris dynamiquement le contenu (par innerHTML par exemple), une table ou autre chose
-
pourquoi ne peut tu pas mettre ta table dans le div ?
tu peut lire le code par innerHTML aussi pour le modifier -
super merci alain cela fonctionne parfaitement
Bonne continuation ;)
pazz -
Ngghhh.. innerHTML pour quoi faire? si c'est pour écrire du texte c'est un peu normal...
<table> ne contient pas de texte il faut lui faire des éléments:(<tr>+<td>, <tr>+<th>, <caption>) -
rebonjour,
oui sa je sais mais malgrès tout sa ne marche pas l'element vient se loger au dessus du premier.
javascript:
document.getElementById('t-1').innerHTML+="<tr><td><textarea id='date1-2' class='txt' ondblclick='disabledORno(this.id);' readonly='readonly'></textarea></td>"+ "<td style='vertical-align: bottom'><div class='plus' id='plus1-2' onclick='AgrandirCase(this.id);' onmouseover='Mover(this.id)'"+ "onmouseout='Mout(this.id);'></div><input id='Time1-2' class='time' type='text' value='00:00' size='2' ondblclick='disabledORno(this.id);'"+ "readonly='readonly' /></td></tr><tr id='Valide1-2' style='display:none;'><td style='border:0px; vertical-align:top;' align='right'> "+ "<div class='Valide' id='valideD1-2' onclick='disabledORno();Sav(this.id);'><a href='#'>ok</a></div>"+ "</td><td style='border:0px; vertical-align:top;' align='right'><div class='Valide' id='valideT1-2'"+ "onclick='disabledORno();'><a href='#'>ok</a></div></td></tr>" -
re,
oui sa je sais mais sa ne change rien l'objet a inserer vient se loger au dessus du premier.
exemple:
html<table id="monid"> <tr><td>Tache 1</td></tr> <tr><td onclick="NewLigne();">+</td></tr> </table>
...........................................................
javascriptfunction NewLigne(){ document.getElementById("monid").innerHTML+="<tr><td>Tache 2</td></tr>"; }
ps: ceci est un exemple car je ne peux pas publier l'original (confidentialité).
merci
PAZZ -
UP
-
Je suis d'accord avec oscarapace
Le plus simple est de faire:
<div id='emplacementtab'></div>
document.getElementById('emplacementtab').innerHTML="<table> [.....ton contenu.....] </table>";
-
Bonjours,
merci pour vos réponse, malheureusement cela ne convient pas car je l'aurai bien fait comme sa si je pouvai mais le problème est que la table est déjà presente et que je dois simplement y ajouter des element dynamiquement via javascript et non pas recréer toute la table.
ce problème est tellement bête qu'il me donne la migraine
pazz -
UP!
-
Ça marche très bien,
Pour gérer le nom des champs on peut utiliser:
var rowCount = document.getElementById('matable').getElementsByTagName("TR").length;
Pour compter le nombre de ligne dans la table et l'utiliser dans le nom des champs -
Bonjour,
Sur le même sujet, mon problème est le suivant :
J'ai une table qui est définie ainsi :
<table id="tab">
<thead>
<tr>
<th>Date Op.</th>
<th>Date Val.</th>
<th>Montant</th>
</tr>
</thead>
<tfoot>
<tr>
<td bgcolor="#CCCCCC" colspan="3">
<div id='TXT_Solde' align='right'>
<b>Solde du compte : </b>
</div>
</td>
</tr>
</tfoot>
<tbody>
</tbody></table>
J'exécute le code javaScript suivant :
var newRow=document.getElementById('tab').insertRow(-1);
var newCell=newRow.insertCell(0);
newCell.innerHTML='Case1';
newCell=newRow.insertCell(1);
newCell.innerHTML='Case2';
newCell=newRow.insertCell(2);
newCell.innerHTML='Case3';
La ligne insérée se place en dessous du pied de tableau, alors que je souhaite qu'elle soit insérée dans la zone tbody.
Toute idée est la bienvenue... surtout si elle fonctionne ;-)
Merci
