?
Solved

Creating tables in Internet Explorer

Posted on 2006-04-23
3
Medium Priority
?
814 Views
Last Modified: 2008-02-01
I wrote the following code as a learning experiment to create a simple table using createElement and insertBefore.  The code simply creates a button which then lets you add more tables to the page.  The table appears as a simple blue box.

But I want each new table to appear next to the previous table, so if you keep clicking the create table button, new tables appear left to right.  This is how the code behaves in Firefox.  But in Internet Explorer, the tables appear vertically, as if it does not understand the "float" property.

Why does this happen in Internet Explorer, and what are some fixes?


<html>
<head>
<style>
.adboxdiv {
      float: left;
      margin: 0px 15px 15px 0px
}
</style>

<script language = "Javascript">

function addelement() {
      var pdiv = document.createElement("div");
      var ptable = document.createElement("table");
      var ptbody = document.createElement("tbody");
      var prow = document.createElement("tr");
      var pcell = document.createElement("td");

      pdiv.setAttribute("class","adboxdiv");
      ptable.setAttribute("border","0");
      pcell.setAttribute("width","100");
      pcell.setAttribute("height","50");
      pcell.setAttribute("bgColor","#0000FF");

      prow.appendChild(pcell);
      ptbody.appendChild(prow);
      ptable.appendChild(ptbody);
      pdiv.appendChild(ptable);

      document.getElementById("maincell").insertBefore(pdiv, document.getElementById('tablediv'));            
}

</script>

</head>
<body>
<table id = "maintable" border = "0" cellspacing = "0" cellpadding = "0" width = "100%">
<tr><td id = "maincell">

<div id = "tablediv" class = "adboxdiv"><table border = "0"><tr><td width = "100" height = "50" bgColor = =#FF0000"></td></tr></table></div>

</td></tr>

</table>

<input type = "submit" value = "add a table" onclick = "addelement()">
<input type = "submit" value = "delete table" onclick = "removeelement()">

</body>
</html>
0
Comment
Question by:chsalvia
  • 2
3 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 1000 total points
ID: 16518180
Try using the className property as an extension to setAttribute("class"):

     pdiv.setAttribute("class","adboxdiv");
     pdiv.className = "adboxdiv"


-r-
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16518187
I am not sure about the technical reasons why msIE behaves this way, but I know msIE has difficulties which some of the basic dom operations like setAttribute.

-r-
0
 

Author Comment

by:chsalvia
ID: 16518215
Thanks!  That worked nicely.  
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question