Add New Row to Table 2

[vicvirk]

This works find in FF and Chrome (PC), but not in IE (I have 7 installed)...IE gives its usual descriptive error: "Uknown Runtime error" on the line highlighted in red...

Will it simply not work this way, do I have to use the DOM as outlined on this link (as an example):

http://www.mredkj.com/tutorials/tableaddrow.html

<script language="javascript">
	function addRowToTable() {
		var currentRows = document.getElementById("myTable").innerHTML;
		var newRow = "";
		newRow = "<tr><td>new col 1</td><td>new col 2</td></tr>";
		[COLOR=red]document.getElementById("myTable").innerHTML = currentRows + newRow;[/color]
	}
</script>
<a href="javascript:addRowToTable()">click</a>
<table id="myTable">
<tr>
	<td>orig col 1</td>
	<td>orig col 2</td>
</tr>
</table>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[vacunita]

Try this:

 var currentRows = document.getElementById("myTable").insertRow(3);
        var firstcell=currentRows.insertCell(0);
        var secondcell=currentRows.insertCell(1);
        
        firstcell.innerHTML = "new col 1";
        secondcell.innerHTML = "new col 2";

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[vicvirk]

Thanks Phil, that led me in the right direction..

Any idea why the other method I posted above didn't work in IE?

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[tsuji]

>Any idea why the other method I posted above didn't work in IE?
It is due to this line.
>document.getElementById("myTable").innerHTML = currentRows + newRow;
The innerHTML of table object is readonly on IE.

 

[vicvirk]

cool - thanks tsuji

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[tsuji]

I would also suggest you alert the currentRows which is the original innerHTML of the table. You'll see there is a tbody node coming from the inner-building mechanism of IE as well as mozilla/... The build of table would be safer using table object model (tob) for cross-browser compatibility purpose.

 

[vicvirk]

Yeah, I used Phil's method and it worked great...I'm not too concerned about browsers as the end product is something only me and a few friends are going to use...as long as it works in IE, I'm happy - if it is something I'm going to release to the rest of the world, then yeah, I would look at a better approach.



--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc