By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,375 Members | 1,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,375 IT Pros & Developers. It's quick & easy.

DOM to create <TR> & <TD>

P: n/a
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(document.createElement( '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.
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
El Diablo wrote:
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(document.createElement( '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?

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
Jul 20 '05 #2

P: n/a


El Diablo wrote:

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

theTable.tHead.appendChild(document.createElement( '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.


Well, once you know that
document.createElement('tagname')
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.createElement('tr');
var cell = document.createElement('td');
cell.appendChild(document.createTextNode('Kibology .'));
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(document.createTextNode('JavaScri pt'));
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/

Jul 20 '05 #3

P: n/a
Exactly what I needed to know. Many thanks.

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:40******@olaf.komtel.net...


El Diablo wrote:

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

theTable.tHead.appendChild(document.createElement( '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.


Well, once you know that
document.createElement('tagname')
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.createElement('tr');
var cell = document.createElement('td');
cell.appendChild(document.createTextNode('Kibology .'));
row.appendChild(cell);
cell = document.createElement('td');
cell.appendChild(document.createTextNode('JavaScri pt'));
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/

Jul 20 '05 #4

P: n/a
Hi.
I've got an example.
Here's the code:

<html>
<head>
<title>Example</title>
<script language="javascript">

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

var tr = tbody.lastChild;

tbody.removeChild(tr);
}

function Insere(){
var tbody=document.getElementById("tbl").firstChild;
var newTR = document.createElement("tr");
var newTD1 = document.createElement("td");
var newTD2 = document.createElement("td");
var newText1 = document.createTextNode(document.cart.primNome.val ue);
var newText2 = document.createTextNode(document.cart.ultNome.valu e);

newTD1.appendChild(newText1);
newTD2.appendChild(newText2);
newTR.appendChild(newTD1);
newTR.appendChild(newTD2);
tbody.appendChild(newTR);
}
</script>
</head>
<body id="bodyTag">
<button onclick="Remove()" id=button1 name=button1>Remover</button>
<button onclick="Insere()" id=button2 name=button2>Adicionar</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" <ze*****@zen.co.uk> escreveu na mensagem
news:40**********************@lovejoy.zen.co.uk...
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(document.createElement( '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.

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.