By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,636 Members | 1,181 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,636 IT Pros & Developers. It's quick & easy.

Unable to generate the Table

P: n/a
I was trying to display a small table on the click event of the button
but my browser just displayes plain text (I tried on Firefox and IE
both) here is the code :
<HTML>

<HEAD>
<TITLE>
Table Hover Test
</TITLE>

<SCRIPT>
function makeTable()
{
document.getElementById('insertCalTable').innerHTM L+='<TABLE
BORDER=5>'
for(var i=0;i<10;i++)
{
document.getElementById('insertCalTable').innerHTM L+='<TR>'
for(var j=0;j<10;j++)
document.getElementById('insertCalTable').innerHTM L+='<TD>Hi
There</TD>'
document.getElementById('insertCalTable').innerHTM L+='</TR>'
}
document.getElementById('insertCalTable').innerHTM L += '</TABLE>'
}
function htmlCode()
{
document.getElementById('insertHere').innerHTML
+=document.getElementById('insertCalTable').innerH TML
}
</SCRIPT>
</HEAD>

<BODY>
<Button onCLick="makeTable()">Create Table</Button>
<Button onCLick="htmlCode()">Create Table</Button>
<DIV ID="insertCalTable">
</DIV>

<Div id="insertHere">
</Div>

</BODY>

</HTML>

can anybody of you please suggest , where am I going wrong

Sep 24 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Prashant Mahajan wrote:
I was trying to display a small table on the click event of the button
but my browser just displayes plain text (I tried on Firefox and IE
both) here is the code :

When posting code, you need to make life as simple as possible for
others to help you. Do not use tabs, indent using 2 or 4 spaces.

Manually wrap lines of code at about 70 characters, allowing automatic
wrapping will introduce errors that make life more difficult.


<HTML>

<HEAD>
<TITLE>
Table Hover Test
</TITLE>

<SCRIPT>
The type attribute is required:

<script type="text/javascript">

function makeTable()
{
document.getElementById('insertCalTable').innerHTM L+='<TABLE
BORDER=5>'


Do not use innerHTML to create tables. You can get away with creating
the entire table in one go, but in general you should use the document
object model (DOM) for complex elements like tables or other nested
elements - Microsoft, who invented innerHTML offer the same advice:

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp>
To use innerHTML, concatenate your HTML into a single variable, then
write it in one go:

function makeTable()
{
var txt = '<TABLE BORDER=5>';
for (var i=0; i<10; i++){
txt += '<tr>'
for (var j=0; j<10; j++){
txt += '<td>Hi There</td>';
}
txt += '</tr>';
}
txt += '</table>'
document.getElementById('insertCalTable').innerHTM L = txt;
}
The equivalent using DOM would be:

function makeTable()
{
var oTable = document.createElement('table');
var oTBody = document.createElement('tbody');
for (var i=0; i<10; i++){
var oTR = document.createElement('tr');
for (var j=0; j<10; j++){
var oTD = document.createElement('td');
oTD.appendChild(document.createTextNode('Hi There'));
oTR.appendChild(oTD);
}
oTBody.appendChild(oTR);
}
oTable.appendChild(oTBody);
document.getElementById('insertCalTable').appendCh ild(oTable);
}

so the logic is pretty much what you tried with innerHTML but the
methods require a little more typing - and you are standards compliant.

[...]

--
Rob
Sep 24 '05 #2

P: n/a
Thanks a lot for your reply I will try what you said , and thanks for
making me aware of the current standereds

Sep 24 '05 #3

P: n/a
Your method worked , thanks a lot.

Sep 24 '05 #4

P: n/a
Do not use innerHTML to create tables. You can get away with creating
the entire table in one go, but in general you should use the document
object model (DOM) for complex elements like tables or other nested
elements - Microsoft, who invented innerHTML offer the same advice:

Ok I got you so far but I want to know "WHY" that method didn't
worked? You said yourself that the logic wasn't the problem so then why
the innerHTML property didn't worked the way it is supposed to do?

Sep 25 '05 #5

P: n/a
Prashant Mahajan wrote on 25 sep 2005 in comp.lang.javascript:
Do not use innerHTML to create tables. You can get away with creating
the entire table in one go, but in general you should use the document
object model (DOM) for complex elements like tables or other nested
elements - Microsoft, who invented innerHTML offer the same advice:

Ok I got you so far but I want to know "WHY" that method didn't
worked? You said yourself that the logic wasn't the problem so then why
the innerHTML property didn't worked the way it is supposed to do?


Because innerHTML inserting a incomplete table invokes the browser to add
the missing parts of the table. Retrieving that changed tablecode and
adding to that by

x.innerHTML += ...

will make havoc of the resulting table code.

See the thread:
<http://groups.google.com/group/comp.lang.javascript/msg/c537d4c1faf55ebd>
4 days ago.

Searching the archive before asking the same question as was asked recently
is common Netiquette, btw.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Sep 25 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.