Table not displayed

Question

I want to display table by the way I have in my code below but not displayed in the screen, code is using only html and Javascript

<body id="page">
 <center>
    <table id="tables" border="1px" cellspacing="50px" style="margin-top:70px" >
    <script type="text/javascript">
     var row=2;

        for(var j=1;j<=2;j++){          
            $('#tables').append("<tr id='row"+j+"' style='margin-bottom:50px'>");
            for(var k=1;k<=5;k++){
                $("#row"+j).append("<td id='table"+k+"' class='button'  width='150' height='150' onclick='printBill("+k+")' background='images/green.png' align='center'>"+
                                            "<font size='+8'><b>"+k+"</b></font>"+
                                            "<br><font id='clock"+k+"' size='+1'> 0:0:0 </font>"+
                                        "</td>");
                }
            $('#tables').append("<tr id='row"+j+"' style='margin-bottom:50px'>");
        }

    </script>

    </table>
</center>
</body>

Can anyone help in finding what's the problem with this code?

Probably doesn't help that your script is within the table object (so probably isn't being found)... try putting into an onload fired function — freefaller, Jun 14 '12 at 11:16
I found your code works fine here: http://jsfiddle.net/6332Q/ have you included jQuery? — Someth Victory, Jun 14 '12 at 11:22
offtopic: instead of , you could use `margin-left:auto; margin-right:auto;` on the table. — biziclop, Jun 14 '12 at 12:19
Plus, you should create only one element with the same id, if you don't want early insanity :) — biziclop, Jun 14 '12 at 12:44

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You could use two typical ways of modifying the document around page loading:

While the html is still loading:

<table id="tables">
  <tbody>
    <script type="text/javascript">
      document.write('<tr>......</tr>');
    </script>
  </tbody>
</table>

After the html page is loaded (more specifically when the DOM is ready):

<table id="tables">
  <tbody>
  </tbody>
</table>
<script type="text/javascript">
  $(function(){ // see http://api.jquery.com/jQuery/#jQuery3
    // the full DOM is ready now, you can start modifying it.
    $('#tables > tbody').append('<tr>......</tr>');
  });
</script>

As you can see, I inserted a tbody tag between the table and its trs: browsers usually create this tbody tag, even if your source doesn't contain it. By always adding a tbody (or thead/tfoot if you wish) you can avoid some potential trouble.

See for example Can I rely on the implicit creation of the `tbody` tag? or search for implicit tbody.

I cleaned up your code a bit: http://jsfiddle.net/6332Q/1/

Table not displayed

1 Answers1