Print new row in table

[michelle]

I am trying to add an extra row to my table, but it just won't show up on the screen.

The code works, since if I put the "div" outside the table, you can see the contents being sent to it.

Have I put the "div"-element in the wrong place?

function printToLayerOuter(contents, layerName)
{
document.getElementById(layerName).outerHTML=contents
}


<table width="200" cellspacing="1" cellpadding="4" border="1">
<tr>
<td><a href="#" onClick="printToLayerOuter('<tr><td>New Row</td></tr>', 'w587');">New row</a>
</td>
</tr>
<div id="w587"></span>
</table>

Any thoughts?
// Michelle

[Khalid Ali]

Here is th eproper way to add new element.

vat tbl = document.getElementById9"tableId");

then create a new tr element

var trEl = document.createElement("tr");

//now create new td element

var tdEl = document.createElement("td");
tdEl.appendChild(document.createTextNode("This is new TD"));

//now add td to tr and tr to table
tbl.appendChild(trEl.appendChild(tdEl)));

I have not tested it ,so there is a possibility I am missing a parenthesis here and there...

[michelle]

Sorry, but nothing shows up now either.
Am I missing something?
Here is how I did it, using the code you provided:

function addRow() {
var tbl = document.getElementById("tableId");

//then create a new tr element

var trEl = document.createElement("tr");

//now create new td element

var tdEl = document.createElement("td");
tdEl.appendChild(document.createTextNode("This is new TD"));

//now add td to tr and tr to table
tbl.appendChild(trEl.appendChild(tdEl));
}

<table width="200" cellspacing="1" cellpadding="4" border="1" id="tableId">
<tr>
<td><a href="#" onClick="addRow();">New row</a>
</td>
</tr>
</table>

[michelle]

I noticed you had to add a <tbody id=tableId> to the whole story, otherwise the new rows are added outside this and not shown...

[Fang]

It works for Mozilla, but not for IE.
Have a look here (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/tables/buildtables.asp) for a Microsoft and a DOM method.

[Khalid Ali]

Fang is almost right when he says that my solution does not work in IE,however,it does work in IE, the only f**kup IE has is that it does not refresh the document to reflect the changes(I have seen this happened only when dynamically creating tables).

what you need to do is at the end when all of the elements are created and added to the table,do this

if(document.all){
tableRef.innerHTML = tableRef.innerHTML;
}

[Fang]

This will work for IE and Moz.
In IE the <tr> has to have a<tbody> as container:

function NewRow() {
ObjRow = document.createElement("TR");
document.getElementById("table2").appendChild(ObjRow);
ObjCell = document.createElement("TD");
ObjCell.innerHTML = "XXXX";
ObjRow.appendChild(ObjCell);
}

<table border="1" cellpadding="0" cellspacing="0" summary="">
<tbody id="table2">
<tr><td>existing row</td><tr>
</tbody>
</table>
<a href="#" onClick="NewRow();">New row</a>

[gokou]

var trel = document.createElement("tr");
document.getElementById("tableid1").appendChild(trel);
var tdel = document.createElement("td");
tdel.document.createTextNode(msg);
trel.appendChild(tdel);

This is suppose to display an error message when hitting submit on a form. It does nothing on ie and it just submits the form in netscape even if there are errors.

msg variable is what stores the error messages.