[Javascript] Inserire Nuova riga in una Tabella

**Desvar** · 03-10-2005, 14:54

Ciao a tutti,
C'è un modo in javascript per aggiungere un <TR> ad una <TABLE> html?

**fcaldera** · 03-10-2005, 15:07

devi usare i metodi
- createElement
- appendChild

Qui trovi un esempio...
www.pixline.net/44

**Xinod** · 03-10-2005, 15:10

si', se approfondisci leggendo lo speciale DOM di pro.html.it ti sara' tutto + chiaro

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>aggiungi tr e relativi td a tabella</title>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
	if(document.createElement && document.getElementById && document.getElementsByTagName) {
		// crea elementi
		var oTr=document.createElement("TR");
		var oTd1=document.createElement("TD");
		var oTd2=document.createElement("TD");

		var oText1=document.createTextNode("riga aggiunta numero "+num);
		var oText2=document.createTextNode("altra cella aggiunta");

		// appendi al relativo padre

		oTd1.appendChild(oText1);
		oTd2.appendChild(oText2);

		oTr.appendChild(oTd1);
		oTr.appendChild(oTd2);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}
//-->
</script>
</head>
<body>
<form name="modulo">
<input type="button" value="accoda" onclick="accoda()">
<table border="1" id="tabella">
<tbody>
<tr>
<td>riga gia' presente</td><td>altra cella gia' presente</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

ciao

**Desvar** · 03-10-2005, 15:24

ho trovato questo LINK ma ho un problema.

Sono riuscito a creare nuove righe ma poi quando vado a vedere il Source HTML della pagina creata queste righe non esistono!!!

Metto lo script:

function prova(){
tabella = document.getElementById('tabTratt')
tabellabody = document.createElement("TBODY");
nuovariga = document.createElement("TR");
nuovariga.onMouseOver="this.bgColor=over";
nuovariga.onMouseOut="this.bgColor=out";
nuovariga.style="cursor

ointer;";

nuovacolonna = document.createElement("TD");
testo = document.createTextNode('aaa');
nuovacolonna.appendChild(testo);
nuovariga.appendChild(nuovacolonna);

nuovacolonna = document.createElement("TD");
testo = document.createTextNode('aaa2');
nuovacolonna.appendChild(testo);
nuovariga.appendChild(nuovacolonna);

nuovacolonna = document.createElement("TD");
testo = document.createTextNode('aaa3');
nuovacolonna.appendChild(testo);
nuovariga.appendChild(nuovacolonna);

nuovacolonna = document.createElement("TD");
testo = document.createTextNode('aaa4');
nuovacolonna.appendChild(testo);
nuovariga.appendChild(nuovacolonna);

tabellabody.appendChild(nuovariga);
tabella.appendChild(tabellabody);
}

<table width="465" border="0" align="center" cellspacing="3" id="tabTratt">
<tr id="0">
<td class="bordoDES">Nome farmaco</td>
<td class="bordoDES">Principio attivo</td>
<td class="bordoDES">Dosaggio</td>
<td>Data inizio ass.</td>
</tr>

<tr id="1" onMouseOver="this.bgColor=over" onMouseOut="this.bgColor=out" style="cursor

ointer; ">
<td class="bordoSUP bordoDES" title="Nome farmaco: Solexa"><input name="nometratt" id="nometratt" type="hidden" value="Solexa" />Solexa</td>
<td class="bordoSUP bordoDES" title="Principio attivo: ssosososos"><input name="princtratt" id="princtratt" type="hidden" value="ssosososos" />ssosososos</td>
<td class="bordoSUP bordoDES" title="Dosaggio: 30 mg/dl"><input name="dosetratt" id="dosetratt" type="hidden" value="30 mg/dl" />30 mg/dl</td>
<td class="bordoSUP" title="Data inizio ass.: 13/01/2005"><input name="datatratt" id="datatratt" type="hidden" value="13/01/2005" />13/01/2005</td>
</tr>

</table>

**fcaldera** · 03-10-2005, 15:33

è naturale, perchè stai modificando la visualizzazione della pagina e non il sorgente...

**Desvar** · 03-10-2005, 15:39

Riesco però a sapere quante righe ha una tabella?

tipo tabella.length?

**fcaldera** · 03-10-2005, 15:41

si, perchè la lettura di tale dato tiene conto anche delle modifiche che hai fatto a prescindere del cntenuto del file sorgente.

**Desvar** · 03-10-2005, 15:53

allora perché se faccio l'alert di tabella.length dopo il getEleme ho come risultato undefined?

e poi queste tre righe non me le prende

nuovariga.onMouseOver="this.bgColor=over";
nuovariga.onMouseOut="this.bgColor=out";
nuovariga.style="cursor

ointer;";

**fcaldera** · 03-10-2005, 15:58

non puoi calcolare il length così perchè lo stai calcolando sulla tabella: se vuoi sapere il numero di righe credo tu debba fare così:

document.getElementsByTagName('tr').length;

**AnFrusch@pepp** · 03-10-2005, 16:37

veramente così calcoli tutti i TR presenti nel documento.. secondo me devi prima individuare quale tabella ti interessa (magari assegnandole un ID e richiamandola con getElementById) e poi calcolando - sempre sfruttando il DOM - il numero di figli (in realtà il childNode di una table chredo sia un TBODY, quindi devi calcolare quanti figli 'ha' il suo TBODY) estrapolando la lunghezza dell'array childNodes.

ma questa è solo la mia opinione..

Bye..

Discussione: [Javascript] Inserire Nuova riga in una Tabella

Strumenti discussione

Ricerca discussione

Visualizza

[Javascript] Inserire Nuova riga in una Tabella

Permessi di invio