DOM to create <TR> & <TD>

[El Diablo]

Hi there,

I'm trying dynamically generate extra rows in a table. So far this achieves
this task within the tHead segment:

theTable.tHead. appendChild(doc ument.createEle ment('TR'))

....but this only gives me table rows with no table data cells. So I would
like to know if it's possible to create several <TH> within the tHead row
using this method?

I'm new to DOM manipulation so any information or pointers would be greatly
appreciated.

- Thanks.

[F. Da Costa]

Re: DOM to create &lt;TR&gt; &amp; &lt;TD&gt;

El Diablo wrote:[color=blue]
> Hi there,
>
> I'm trying dynamically generate extra rows in a table. So far this achieves
> this task within the tHead segment:
>
> theTable.tHead. appendChild(doc ument.createEle ment('TR'))
>
> ....but this only gives me table rows with no table data cells. So I would
> like to know if it's possible to create several <TH> within the tHead row
> using this method?
>[/color]
Can't you just use the same methodology?
Create a TH (or a TD) element & append it to the TR (as many as are
required). Since the TR is already appended to the thead y'r ok.

GL
Fermin DCG

[Martin Honnen]

Re: DOM to create &lt;TR&gt; &amp; &lt;TD&gt;



El Diablo wrote:

[color=blue]
> I'm trying dynamically generate extra rows in a table. So far this achieves
> this task within the tHead segment:
>
> theTable.tHead. appendChild(doc ument.createEle ment('TR'))
>
> ...but this only gives me table rows with no table data cells. So I would
> like to know if it's possible to create several <TH> within the tHead row
> using this method?
>
> I'm new to DOM manipulation so any information or pointers would be greatly
> appreciated.[/color]

Well, once you know that
document.create Element('tagnam e')
creates an element object with that tagname and you know appendChild it
should be clear that you can store an element object reference in a
variable, append child nodes as follows:
var row = document.create Element('tr');
var cell = document.create Element('td');
cell.appendChil d(document.crea teTextNode('Kib ology.'));
row.appendChild (cell);
cell = document.create Element('td');
cell.appendChil d(document.crea teTextNode('Jav aScript'));
row.appendChild (cell);
...
Then when you are done creating table cells use appendChild on a table
or table section to append the row.

--

Martin Honnen

http://JavaScript.FAQTs.com/

[El Diablo]

Re: DOM to create &lt;TR&gt; &amp; &lt;TD&gt;

Exactly what I needed to know. Many thanks.

"Martin Honnen" <mahotrash@yaho o.de> wrote in message
news:401e4e44@o laf.komtel.net. ..[color=blue]
>
>
> El Diablo wrote:
>
>[color=green]
> > I'm trying dynamically generate extra rows in a table. So far this[/color][/color]
achieves[color=blue][color=green]
> > this task within the tHead segment:
> >
> > theTable.tHead. appendChild(doc ument.createEle ment('TR'))
> >
> > ...but this only gives me table rows with no table data cells. So I[/color][/color]
would[color=blue][color=green]
> > like to know if it's possible to create several <TH> within the tHead[/color][/color]
row[color=blue][color=green]
> > using this method?
> >
> > I'm new to DOM manipulation so any information or pointers would be[/color][/color]
greatly[color=blue][color=green]
> > appreciated.[/color]
>
> Well, once you know that
> document.create Element('tagnam e')
> creates an element object with that tagname and you know appendChild it
> should be clear that you can store an element object reference in a
> variable, append child nodes as follows:
> var row = document.create Element('tr');
> var cell = document.create Element('td');
> cell.appendChil d(document.crea teTextNode('Kib ology.'));
> row.appendChild (cell);
> cell = document.create Element('td');
> cell.appendChil d(document.crea teTextNode('Jav aScript'));
> row.appendChild (cell);
> ...
> Then when you are done creating table cells use appendChild on a table
> or table section to append the row.
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/
>[/color]

[Tuga]

Re: DOM to create &lt;TR&gt; &amp; &lt;TD&gt;

Hi.
I've got an example.
Here's the code:

<html>
<head>
<title>Exampl e</title>
<script language="javas cript">

function Remove(){
var tbody = document.getEle mentById("tbl") .firstChild;
if(tbody.childN odes.length <= 1)
{
alert('There are no regists!');
return;
}

var tr = tbody.lastChild ;

tbody.removeChi ld(tr);
}

function Insere(){
var tbody=document. getElementById( "tbl").firstChi ld;
var newTR = document.create Element("tr");
var newTD1 = document.create Element("td");
var newTD2 = document.create Element("td");
var newText1 = document.create TextNode(docume nt.cart.primNom e.value);
var newText2 = document.create TextNode(docume nt.cart.ultNome .value);

newTD1.appendCh ild(newText1);
newTD2.appendCh ild(newText2);
newTR.appendChi ld(newTD1);
newTR.appendChi ld(newTD2);
tbody.appendChi ld(newTR);
}
</script>
</head>
<body id="bodyTag">
<button onclick="Remove ()" id=button1 name=button1>Re mover</button>
<button onclick="Insere ()" id=button2 name=button2>Ad icionar</button>
<form id="cart" name=cart>
1º Nome: <input type=text id=primNome name="primNome" >
<br>Último nome: <input type=text id=ultNome name="ultNome">
</form>
<table id=tbl bgcolor=#ffffff >
<tr bgcolor=#ccccff >
<th>1º Nome</td>
<th>Último nome</td>
</tr>
</table>


</body>
</html>

There are words in Portuguese sorry but i don't want to change.
This simple form accepts the first and the last name, and then creates a
<tr> with 2 <tr> for show the values.
Hope this helps.


"El Diablo" <zen8789@zen.co .uk> escreveu na mensagem
news:401d64e8$0 $1305$fa0fcedb@ lovejoy.zen.co. uk...[color=blue]
> Hi there,
>
> I'm trying dynamically generate extra rows in a table. So far this[/color]
achieves[color=blue]
> this task within the tHead segment:
>
> theTable.tHead. appendChild(doc ument.createEle ment('TR'))
>
> ...but this only gives me table rows with no table data cells. So I would
> like to know if it's possible to create several <TH> within the tHead row
> using this method?
>
> I'm new to DOM manipulation so any information or pointers would be[/color]
greatly[color=blue]
> appreciated.
>
> - Thanks.
>
>[/color]