PDA

View Full Version : Problem using innerHTML within tables - very strange!



philnelson05
July 20th, 2005, 02:15 PM
Hi,

I have the following script (simplified ffrom full version):

<html>
<script language="javascript">
function insert_me()
{
window.alert(document.all.insert_here.innerHTML)
document.all.insert_here.innerHTML="<tr><td>cell2</td></tr>"
window.alert(document.all.insert_here.innerHTML)
}
</script>
<body>
<table>
<tr><td>cell1</td></tr>
<div id="insert_here"></div>
<tr><td>cell3</td></tr>
</table>
<input type="button" onclick="insert_me()" value="click me">
</body>
</html>

The result is:
1st window.alert returns "" (as expected)
2nd window.alert returns "cell2</TD></TR>" (NOT expected!!)

As you can tell this has been simplified, and still it seems not to work! Can anybody think of a soloution (unfortunately it is not viable to have the <tr> & <td> tags appearing when the page loads, only when the function is run)? If so, please let me know!

Thanks,
Phil.

Julian Turner
July 20th, 2005, 02:55 PM
document.all.insert_here.innerHTML="<tr><td>cell2</td></tr>"

<div id="insert_here"></div>



What you are trying to do is invalid HTML.

I don't think you can have a table-row inside a div, according to the HTML specification at W3C.

You could try "outerHTML" instead. I.e. replace the div with the table-row.

Also note that document.all is not cross-browser, and innerHTML/outerHTML is non-standard.

Alternatively try using compliant methods: document.GetElementById, createElement, createTextNode, replaceChild etc.

SpirtOfGrandeur
July 20th, 2005, 06:13 PM
Remember your TBODY tags ;) Just because we are allowed to be lazy does not mean that we should be lazy ;)

*Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing i gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.


<html>
<head>
<script type='text/javascript'>
function insertMe() {
var oTR = document.getElementById('lastRow');
if (!oTR || oTR.parentNode.tagName != 'TBODY' ) return false;
var oBody = oTR.parentNode;
var nTR = document.createElement('tr');
oBody.insertBefore( nTR, oTR );
var nTD = nTR.appendChild( document.createElement('td') );
nTD.appendChild( document.createTextNode('cell2') );
return true;
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>cell1</td>
</tr>
<tr id='lastRow'>
<td>cell3</td>
</tr>
</tbody>
</table>
<input type="button" onclick="return insertMe();" value="click me">
</body>
</html>

philnelson05
July 21st, 2005, 08:21 AM
Remember your TBODY tags ;) Just because we are allowed to be lazy does not mean that we should be lazy ;)

*Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing i gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.



Thanks SpirtOfGrandeur, that works just fine and implements well into my app.

PS. Sorry about the badly written code, I wrote up that example without too much attention.

Thanks,
philnelson05.