InnerHTML dans une balise table

Fermé

pazz - 30 janv. 2009 à 15:49
kh2017 - 21 déc. 2017 à 13:48

Bonjour,

Je n'arrive pas a faire un innerHTML dans une balise Table, auriez-vous déjà rencontré ce problème ??

pazz

A voir également:

Innerhtml table
Table ascii - Guide
Table des matières word - Guide
Table des annexes word ✓ - Forum Word
Table des matières et table des annexes - Forum Word
Table des caractères - Guide

13 réponses

Réponse 1 / 13

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
6 févr. 2009 à 13:08

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&eacute;rale</option>';
	ajout+='<option value="Artisan">Artisan</option>';
	ajout+='<option value="Negoce">N&eacute;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&eacute;rale</option>
<option value="Artisan">Artisan</option>
<option value="Negoce">N&eacute;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>

kh2017
21 déc. 2017 à 13:48

merci boucoups très utile

Réponse 2 / 13

oscarapace Messages postés 56 Date d'inscription mardi 20 novembre 2007 Statut Membre Dernière intervention 19 juin 2009 14
5 févr. 2009 à 11:15

je ferais ça plutot avec un <div> et tu écris dynamiquement le contenu (par innerHTML par exemple), une table ou autre chose

Réponse 3 / 13

oscarapace Messages postés 56 Date d'inscription mardi 20 novembre 2007 Statut Membre Dernière intervention 19 juin 2009 14
6 févr. 2009 à 12:29

pourquoi ne peut tu pas mettre ta table dans le div ?

tu peut lire le code par innerHTML aussi pour le modifier

Réponse 4 / 13

pazz
6 févr. 2009 à 15:28

super merci alain cela fonctionne parfaitement

Bonne continuation ;)

pazz

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

Posez votre question

Réponse 5 / 13

fghjd
2 févr. 2009 à 12:58

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

Réponse 6 / 13

pazz
5 févr. 2009 à 09:21

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

Réponse 7 / 13

pazz
5 févr. 2009 à 09:27

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>

...........................................................

javascript


function 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

Réponse 8 / 13

pazz
5 févr. 2009 à 10:53

Réponse 9 / 13

Nep_51 Messages postés 49 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 7 avril 2009 9
5 févr. 2009 à 11:32

Je suis d'accord avec oscarapace

Le plus simple est de faire:
<div id='emplacementtab'></div>

document.getElementById('emplacementtab').innerHTML="<table> [.....ton contenu.....] </table>";

Réponse 10 / 13

pazz
5 févr. 2009 à 11:39

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

Réponse 11 / 13

pazz
6 févr. 2009 à 08:57

UP!

Réponse 12 / 13

ftira
16 mars 2012 à 13:35

Ç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

Réponse 13 / 13

cazirt
22 août 2012 à 14:12

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

cazirt
22 août 2012 à 14:21

J'ai trouvée la réponse !!
En fait il suffit d'identifier le body : <tbody id="theBody"> et ensuite utiliser cet id pour récupérer l'objet de type rows adns lequel on veut ajouter une ligne
var newRow=document.getElementById('theBody').insertRow(-1);

A bon entendeur... ;-)

Discussions similaires

Intégrer une table des annexes et des matières sur word

Création du sommaire sous Word

no bootable partition in table : aidezmoi svp

insérer une table d'illustration

Sommaire + Table des matières + Table des Annexes