javascript - Table not displayed -
hi want display table way have in code below not displayed in screen, code using html , 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 in finding what's problem code? thanx in advance.
you use 2 typical ways of modifying document around page loading:
while html still loading:
<table id="tables"> <tbody> <script type="text/javascript"> document.write('<tr>......</tr>'); </script> </tbody> </table>
after html page loaded (more when dom ready):
<table id="tables"> <tbody> </tbody> </table> <script type="text/javascript"> $(function(){ // see http://api.jquery.com/jquery/#jquery3 // full dom ready now, can start modifying it. $('#tables > tbody').append('<tr>......</tr>'); }); </script>
as can see, inserted tbody
tag between table
, tr
s: browsers create tbody
tag, if source doesn't contain it. adding tbody
(or thead/tfoot
if wish) can avoid potential trouble.
see example can rely on implicit creation of `tbody` tag? or search implicit tbody
.
i cleaned code bit: http://jsfiddle.net/6332q/1/
Comments
Post a Comment