473,383 Members | 1,748 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,383 software developers and data experts.

Unable to generate the Table

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
5 2653
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
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
Your method worked , thanks a lot.

Sep 24 '05 #4
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: jtsree | last post by:
i am using Visual Studio.net professional 2003 (VisualBasic.net).I am building a very very simple project where i need to connect to Microsoft access database through OledbDataAdapter in design...
1
by: jtsree | last post by:
I am Using (Windows XP) Visual Studio.net 2003 professional edition working on VB.net language. I am bulding a very very simple project in VB.net where i connect to Access Database by dragging...
4
by: Chris Bower | last post by:
Reposted from aspnet.buildingcontrols: Ok, I've got a bunch of derived controls that all have a property Rights of type Rights (Rights is an Enumerator). I wrote a custom TypeConverter so that I...
1
by: A Traveler | last post by:
Hello, i am having this problem. The exact error message is: "Unable to generate code for a value of type 'System.Web.UI.Page'. This error occurred while trying to generate the property value for...
10
by: Grumpy Aero Guy | last post by:
Visual Studio .net Academic Edition: After creating a OLEdbDataadapter, followed by an OLE DB Connection (all of which occurs successfully, by the way), I am unable to create a Dataset. I...
0
by: kent.anderson | last post by:
I am getting the following error when attempting to generate C# proxy code with the wsdl.exe tool: Error: Unable to import binding 'XtractSoapBinding' from namespace 'http://xtrac...
2
by: UJ | last post by:
I've got a web service that is giving me back this error message. The directory is Windows\Temp and I have given everybody complete access to this directory and am still getting the error. Any...
0
by: Matt MacDonald | last post by:
Hi All, When using the dataset designer, at least once a week or so, I will try to add a new query to a table adapter, or modify an existing one and get the error "Unable to find connection...
0
by: okonita | last post by:
DB2v8.2 LUW. Unable to drop Foreign Key constraints...although DROP constraints returns undefined name. Am I missing somrthing here? Hi all, I have a perplexing DB2 Drop command situation....
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.