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>

 

 

你可能感兴趣的:(body)