Ajouter un contenu en bas d'une div

il s'ajoute en haut

Sujet résolu

21 février 2010 à 15:18:05

Bonjour tout le monde,

J'aimerais ajouter du texte à la fin d'une div.

J'ai donc cette div contenant ce texte :

<div id="co_author">
		<tr>
			<td class="important">CO-AUTHOR 1</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50"	onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>	
		<tr>
			<td class="important">CO-AUTHOR 2</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			 <td>LAST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
					</td>	
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
			</td>
		</tr>
		<tr>
			<td class="important">CO-AUTHOR 3</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
			</td>
		</tr>
	</div>

J'aurais voulu ajouter un co-auteur :

<tr>
			<td class="important">CO-AUTHOR 3</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
			</td>
		</tr>

Cela fonctionne mais le nouveau co-auteur vient se mettre au dessus de la div et non en dessous.

Auriez-vous une idée de comment je peux faire pour que le co-auteur inséré j'insère en bas et pas en haut.

Merci d'avance.

beegees

Golmote

21 février 2010 à 15:22:42

Déjà, ton code est incorrect. On ne met pas de <tr> directement dans un <div>.

Les <tr>, ça va dans les <thead>, <tfoot> et <tbody> (et à défaut dans les <table>). Point barre.

Donc déjà, fait un code HTML valide.

Ensuite montre-nous ton code d'insertion.

beegees

21 février 2010 à 15:44:47

Merci pour ta réponse Golmote,

Je suis d'accord avec toi, il vaut mieux respecter les exigences HTML strict.

Je présume donc que je dois mettre <tbody> avec un id dans ce dernier ?

Ensuite ajouter un contenu dans le tbody ?

Le problème, c'est que l'information qui doit apparaître dans le tableau n'est pas à la fin du tableau.

Dis moi ce que tu en penses.

Encore merci.

beegees

Golmote

21 février 2010 à 15:50:30

Dans un <table>, tu peux mettre autant de <tbody> que tu veux.

Donc éventuellement, tu peux t'arranger pour devoir ajouter ton contenu à la fin de l'un des <tbody>

SaussageW

21 février 2010 à 15:53:07

Oui, met déjà ton code aux normes, ce sera plus propre

Ensuite je te conseille jquery pour simplifier grandement ce genre d'opération en javascript.

Le code sera aussi simple que quelque chose du genre :

$("#co_author").append("ton co auteur à ajouter");

Golmote

21 février 2010 à 15:54:17

Non non et non... :'(

Il est fortement déconseillé de se lancer dans l'utilisation d'un framework JS avant de maîtriser considérablement le langage...

beegees

21 février 2010 à 15:56:19

Salut,

Merci à vous deux.

@ golmote :

Je ne savais pas que l'on pouvais mettre plusieurs tbody dans un même tableau, cela a donc résolu mon problème :

<tbody id="co_author">

</tbody>

et le contenu :

document.getElementById('co_author').innerHTML+= '<tr><td class="important">CO-AUTHOR 3</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>';

@SaussageW :

Comment mettrais-tu le contenu ci-dessus dans ton append ?

Encore merci à vous deux.

beegees

Golmote

21 février 2010 à 15:57:49

Simplement en remplaçant :

document.getElementById('co_author').innerHTML+= machin;

par

$("#co_author").append(machin);

je crois.

Totony

21 février 2010 à 16:11:52

Je crois que pour rajouter des co-auteurs il serait mieux d'utiliser la fonction document.appendChild() et le stocker dans un array, alors l'utilsateur pourra peut-être enlever 1 formulaire de co-auteurs (si il en met 3 et que en fin de compte il en veut deux).

EDIT :
Quelque chose comme ça :

var CoAuteurArray = new Array();
function AddCoAuteur()
{
   var Div = document.createElement("div");
   Div.innerHTML = "Code html du formulaire.";
   document.getElementById("ID_DE_LELEMENT_QUI_CONTIENT_LES_COAUTEURS").appendChild(Div);
   CoAuteurArray.push(Div);
}
function RemoveCoAuteur(Index)
{
   //Manipulation de l'array
   /* ... */
}

beegees

21 février 2010 à 18:18:51

Salut,

Je crois avoir crié "victoire" un peu trop tôt.

Cela fonctionne parfaitement avec Firefox mais pas du tout avec IE8.

Pour rappel, voici ce que je fais :

J'ajoute ce code dans un tbody :

function Add_Co_Author()
{
	if(global_numero_auteur < 13)
	{
		document.getElementById('co_author').innerHTML+= '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>';
	}
	
	global_numero_auteur+=1;
}

J'ai ajouté des tbody afin d'être propre mais cela ne change rien :

<table>
<tbody>
	<tr>
		<td>ABSTRACT TITLE<span class="asterix">*</span> </td>
		<td align="left" class="td_abstracts"><input size="100" type="text" id="val_title_abstract" class="majuscule" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'" />		</td>	
	</tr>
	<tr>
		<td class="important">FIRST AUTHOR</td>
	</tr>
	<tr>
		<td>FIRST NAME <span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" id="val_first_author_firstname" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	<tr>
		<td>LAST NAME <span class="asterix">*</span></td><td align="left"><input type="text" size="50" id="val_first_author_name" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>	
	<tr>
		<td>HIGHEST DEGREE <span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" id="val_highest_degree" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>	
	<tr>
		<td>INSTITUTION / AFFILIATION <span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="100" id="val_institution" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>	
	<tr>
		<td>DEPARTMENT <span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="100" id="val_department" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>ADDRESS<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="100" id="val_address1" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>ADDRESS</td><td align="left" class="td_abstracts"><input type="text" size="100" id="val_address2" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>ZIP CODE<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="10" id="val_zip" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>CITY<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" id="val_city" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>STATE</td><td align="left" class="td_abstracts"><input type="text" size="50" id="val_state" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>COUNTRY<span class="asterix">*</span></td><td align="left" class="td_abstracts">
			<select id="sel_pays">
				<option selected="selected" value="">Select your country</option>
				<?php 
				
					$fichier="../pays.txt"; 
					$tabfich=file($fichier); 
					for( $i = 0 ; $i < count($tabfich);$i++ )
					{
						echo '<option value="'.$tabfich[$i].'">'.$tabfich[$i].'</option>';
					}
				?> 
			</select>
		</td>
	</tr>
	<tr>
		<td>TELEPHONE<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" id="val_tel" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>FAX</td><td align="left" class="td_abstracts"><input type="text" id="val_fax" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>EMAIL<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" id="val_email" size="70" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
	</tr>
	<tr>
		<td>APPLYING TRAVEL AWARDS</td><td colspan="15">YES</td><td colspan="5" align="left" class="td_abstracts"><input type="checkbox"></td><td>NO</td><td><input type="checkbox" title="NO"></td>
	</tr>
	<tr>
		<td>APPLYING AN ORAL PRESENTATION</td><td>YES</td><td align="left" class="td_abstracts"><input type="checkbox"></td><td>NO</td><td><input type="checkbox" title="NO"></td>
	</tr>
	
		<tr>
			<td class="important">CO-AUTHOR 1</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50"	onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>	
		<tr>
			<td class="important">CO-AUTHOR 2</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			 <td>LAST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
					</td>	
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
			</td>
		</tr>
		<tr>
			<td class="important">CO-AUTHOR 3</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'">
			</td>
		</tr>
		</tbody>
	<tbody id="co_author">
	
	</tbody>
	<tbody>
	<tr>
		<td><input type="button" value="Add CO-AUTHOR" onClick="Add_Co_Author(document.getElementById('co_author').innerHTML);"></td>
	</tr>
	<tr>
		<td>ABASTRACT</td><td align="left"><textarea cols="100" rows="5" id="text_abstract" onkeydown="showKeyCode(event, this)"></textarea></td>
	</tr>
	<tr>
		<td>FUNDERS AKNOLEDGEMENT</td><td align="left"><textarea></textarea></td>
	</tr>
	<tr><td><input type="button" value="SUBMIT ABSTRACT"></td></tr>
	</tbody>
</table>

Merci d'avance pour l'aide.

beegees

Tillertan

22 février 2010 à 12:01:22

var tr, cell;

tr = document.getElementById('co_author').insertRow(-1);
cell = tr.insertCell(0);
cell.className = 'important';
cell.innerHTML = 'CO-AUTHOR ' + global_numero_auteur;

tr = document.getElementById('co_author').insertRow(-1);
cell = tr.insertCell(0);
cell.innerHTML = 'FIRST NAME<span class="asterix">*</span>';
cell = tr.insertCell(1);
cell.style.textAlign = 'left';
cell.innerHTML = '<input type="text" size="50">';

tr = document.getElementById('co_author').insertRow(-1);
cell = tr.insertCell(0);
cell.innerHTML = 'LAST NAME<span class="asterix">*</span>';
cell = tr.insertCell(1);
cell.style.textAlign = 'left';
cell.innerHTML = '<input type="text" size="50">';

tr = document.getElementById('co_author').insertRow(-1);
cell = tr.insertCell(0);
cell.innerHTML = 'INSTITUTION/AFFILIATION<span class="asterix">*</span>';
cell = tr.insertCell(1);
cell.style.textAlign = 'left';
cell.innerHTML = '<input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'">';

beegees

22 février 2010 à 13:07:52

Bonjour Tiller,

Woaw !!! ça fonctionne trop bien, merci mille fois.

T'es vraiment un pro de javascript.

Encore merci.

beegees