Problem in creating table using javascript

Question

Hi i am creating a table within a div, but its not showing in the webpage . My html code is like

 <div id="right">
  <h2 id="right1">hello !</h2>
  <div id="previewWin">
  </div>
  <div id="welcome">
  </div>
</div>

CSS is like :

#right {
    float:right;
  width: 490px;
 padding-right: 110px;
      padding-top: 301px;
    }
    #welcome {
  margin-right: 20px;
}

#previewWin {
background-color: #decea2;
width: 150px;
height: 200px;
font: 1.0em arial, helvetica, sans-serif, larger, bold;
padding: 5px;
position: absolute;
visibility: hidden;
border: 1px  solid ;
overflow: hidden;
}

#previewWin h1, #previewWin h2 {
    font-size: 1.0em;
}

PreviewWin is a hidden div :

Javascript code:

function CreateInterface(){
var table=document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
tr.appendChild(td);
document.getElementById("welcome").appendChild(table);

}

The table is now showing in the explorer...Please help me out ...And this finction CreateInterface triggers on an onclick event ...Thanks in advance

Try adding some content to the table.

karim79
– karim79

2011-08-16 11:23:49 +00:00
Commented Aug 16, 2011 at 11:23 — karim79
– karim79, Commented Aug 16, 2011 at 11:23

Joseph Silber · Accepted Answer · 2011-08-16 11:28:16Z

2

Since you have not applied any styles to your table, and the table is empty, there's nothing for you to see.

If you want to see the table without any content in it, give it some borders and padding.

answered Aug 16, 2011 at 11:28

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nobody · Accepted Answer · 2011-08-16 11:34:06Z

0

You must have a <tbody> inside the <table> for you code to work in Internet Explorer:

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
table.appendChild(tbody);
tbody.appendChild(tr);

answered Aug 16, 2011 at 11:34

nobody

10.7k4 gold badges29 silver badges43 bronze badges

Comments

shabunc · Accepted Answer · 2011-08-16 11:31:11Z

0

Try to create tbody, work with it and then append this tbody to table. This should work.

answered Aug 16, 2011 at 11:31

shabunc

25.3k22 gold badges83 silver badges113 bronze badges

Comments

tonycoupland · Accepted Answer · 2011-08-16 11:36:06Z

0

Add some content to your and the table should become visible.

function CreateInterface()
{
    var table=document.createElement("table");
    var tr = document.createElement("tr");
    table.appendChild(tr);
    var td = document.createElement("td");
    td.innerHTML = "Hello World";
    tr.appendChild(td);
    document.getElementById("welcome").appendChild(table);
}

answered Aug 16, 2011 at 11:36

tonycoupland

4,2671 gold badge30 silver badges27 bronze badges

Collectives™ on Stack Overflow

Problem in creating table using javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related