InnerHTML dans une balise table

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

Afficher la suite

A voir également:

Innerhtml table
Table ascii - Guide
Table des matières word - Guide
Table des caractères - Guide
No bootable partition in table ✓ - Forum Windows
Tableau croisé dynamique ou table de pilote - Guide

13 réponses

Réponse 1 / 13

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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

merci boucoups très utile

Réponse 2 / 13

oscarapace Messages postés 56 Date d'inscription Statut Membre Dernière intervention 14

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 Statut Membre Dernière intervention 14

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

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

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

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

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

Réponse 9 / 13

Nep_51 Messages postés 49 Date d'inscription Statut Membre Dernière intervention 9

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

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

UP!

Réponse 12 / 13

ftira

Ç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

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

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

Table des matières dont les titres n'apparaissent pas..

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

insérer une table d'illustration

Sommaire + Table des matières + Table des Annexes

WOrd 365 Liste des figures et annexes

Votre réponse

Discussions similaires