...

View Full Version : Using Javascript to insert rows into HTML table



Whiplash450
06-24-2008, 05:01 PM
Hi,

I need to insert rows into an HTML table which I can do using:

var x=document.getElementById('myTable').insertRow(1);

but I need to create the row with an ID so that I can then add cells to the row using:

var y=document.getElementById('row1').insertCell(0);

The table starts with one row (containing the titles) and I then wish to add a row with four cells for each entry in an array.

Any help or ideas would be appreciated. :thumbsup:

binaryWeapon
06-24-2008, 06:33 PM
Does x.id="yourid"; work (I'm guessing not, but untested). Try using rowIndex() maybe? Or table.rows[x]?

Basscyst
06-24-2008, 10:21 PM
This is a much more cross browser example of handling dynamic table rows, hope it helps.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CF Help</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("row_add").onclick=function(){
addRow(['1','2','3','4']);
}
}
function addRow(dataArr){
var tr=document.createElement('tr');
var len=dataArr.length;
for(var i=0;i<len;i++){
var td=document.createElement('td');
td.appendChild(document.createTextNode(dataArr[i]));
tr.appendChild(td);
}
document.getElementById('tbl_bdy').appendChild(tr);
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
</tr>
</thead>
<tbody id="tbl_bdy">
</tbody>
</table>
<input type="button" id="row_add" value="Add Row" />
</body>
</html>


Basscyst

Kor
06-25-2008, 01:30 PM
You could also use the cloneNode() method, but first let us know how your table is, and how should look the first 2 new rows in HTML code.

Whiplash450
06-25-2008, 04:33 PM
Thanks for all your replies,

especially Basscyst, as with a little tweaking to remove the button your code works beautifully.

Many thanks

*EDIT* I thought that I would put my code here in case it helps anyone else.

It writes a table with only headings and add rows filling in the cells with values held in arrays



<HTML>
<HEAD>Table Test<BR><BR>
<TITLE></TITLE>
<SCRIPT type="text/javascript">

var array1 = ['A', 'B', 'C', 'D', 'E', 'F'];

var array2 = ['Anon-A', 'Anon-B', 'Anon-C', 'Anon-D', 'Anon-E', 'Anon-F'];

var array3 = ['-', '-', '-', 'A', '-', '-'];

var array4 = ['-', 'B', '-', '-', '-', '-'];

var readerIndex;
var status;

function addRow(dataArr)
{
var tr=document.createElement('tr');
for(var i=0;i<dataArr.length;i++)
{
var td=document.createElement('td');
td.appendChild(document.createTextNode(dataArr[i]));
tr.appendChild(td);
}
document.getElementById('table_body').appendChild(tr);
}

document.write("<BR><BR><table><thead><tr><th>--Index--</th><th>--Title--</th><th>--Author--</th><th>--Status--</th></tr></thead><tbody id='table_body'></tbody></table>");
for (var x=0;x<array1.length;x++)
{
if(array3[x]!="-")
{
status="OUT";
}
else
{
if(array4[x]!="-")
{
status="Reserved";
}
else
{
status="IN";
}
}
addRow([x,array1[x],array2[x],status]);
}

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum