Forum Moderators: open
Is innerhtml not the way to do this? Will I need to go to the DOM? Or maybe just hard code the html table tags into the script? The layout isn't going to get any more complicated than this, so it wouldn't be the end of the world, but this post is more about why it doesn't work, and ideally, it would be nice to separate the script from the html.
Thanks alot, Code-Breaker
<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function process() {
var buff = "";
var names = new Array(2);
var emails = new Array(2);names[0] = "Joe Smith";
names[1] = "Harry Jones";
emails[0] = "jsmith@here.com";
emails[1] = "hjones@here.com";
buff = "<P><B>Personnel: " + names.length + "</B></P>";
for(var e=0; e < names.length; e++) {
document.getElementById("name").innerHTML = names[e];
document.getElementById("email").innerHTML = emails[e];
buff += document.getElementById("buffer").innerHTML;
alert(buff);
}
document.getElementById("disp").innerHTML = buff;
}
</script>
</head>
<body BGCOLOR="#bebebe" onload="process()">
<TABLE CELLPADDING="0" CELLSPACING="9" BORDER="0">
<DIV ID="buffer" style="display: none">
<TR>
<TD>
<B><DIV ID="name">NAME</DIV></B>
<DIV ID="email">EMAIL</DIV>
</TD>
</TR>
</DIV>
<!-- #EndTemplate --><DIV ID="disp">
</DIV></TABLE>
</body></html>
innerHTMLinnerHTMLThere are a couple of things in your template that are, more than likely, illegal:
1.
<div><b><div> I've gone for a DOM approach, but using the normal element creation methods, rather than specific table methods. I've stayed with
innerHTMLcreateTextNodeI have changed the arrays to a single, 2D array, just to keep the name/email pairs together, and written it in literal notation. In fact, an object would be even better for this, if you didn't want the length printed immediately. Oh yes, I didn't know where you wanted some bits, so I missed them out! Don't bother with formatting tags (<b> etc). Use CSS.
All things considered, it might be more sensible at the moment to just write the HTML!
<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function process()
{
var names =
[
["Joe Smith","jsmith@here.com"],
["Harry Jones","hjones@here.com"]
]var table = document.getElementById("emailtable")
var tbody = table.getElementsByTagName("tbody")[0]
var row, cell;for(var e=0; e<names.length; e++)
{
row = document.createElement("tr")
tbody.appendChild(row)cell = document.createElement('<td class="name">')
cell.innerHTML = names[e][0]
row.appendChild(cell)cell = document.createElement('<td class="email">')
cell.innerHTML = names[e][1]
row.appendChild(cell)
}
}
</script>
</head>
<body BGCOLOR="#bebebe" onload="process()"><TABLE id="emailtable" CELLPADDING="0" CELLSPACING="9" BORDER="0">
<!-- could use a TH element here instead -->
<TR id="head"><TD>NAME</TD><TD>EMAIL</TD></TR>
</TABLE>
</body></html>
I avoided the DOM because I hadn't used it before, but I can see it isn't that intimidating.
One quick follow up...how do you set a cell property? In particular, I want to set a cell's colspan, as well as align properties.
Thanks again, this was really above and beyond. -Code-Breaker
