js创建表格时最好要创建tbody元素

写了一个js九九乘法表，不过这不是我要记录的重点，我发现在ie6/ie7中直接添加tr会不起任何作用，于是再将每个tr添加至tbody里就可以了，呵呵。。。其实也是，一个标准的table应该要拥有caption、thead、tbody、tfoot，当然也不是说必须要拥有，但我觉得tbody最好还是别漏，嗯。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0;font:14px/1.5 tahoma;}
table{border-collapse:collapse;margin:50px auto;}
td{border:1px solid #ccc;padding:8px 12px;}
.hide_border{border:none;}
</style>
<script type="text/javascript">
//如果直接在table里appendChild tr元素，那么在ie6 ie7将会没有任何效果;
//解决方法：创建表格时一定要创建tbody！！！
window.onload=function(){
    var oTable=document.createElement('table');
    var oTbody=document.createElement('tbody');
    for(var i=1;i<10;i++){
        var oTr=document.createElement('tr');
        for(var j=1;j<10;j++){
            var oTd=document.createElement('td');
            if(j<=i){
                oTd.innerHTML=j+'×'+i+'='+j*i;    
            }else{
                oTd.className='hide_border';
            }
            oTr.appendChild(oTd);
        }
        oTbody.appendChild(oTr);    
    }
    oTable.appendChild(oTbody);
    document.body.appendChild(oTable);
}
</script>
</head>

<body>
</body>
</html>

 

 

posted @ 2013-03-15 23:09  evilfox  阅读(3052)  评论(0)  编辑  收藏  举报