Dom-创建表格-使用表格对象

来源：互联网发布：java注释编辑：程序博客网时间：2024/05/16 18:23

web-strom开发

1.创建表格的2种方法

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>创建表格</title>    <link rel="stylesheet" type="text/css" href="table.css"/>/*table.css文件在文章末尾*/    <style type="text/css">       /*@import url(table.css);错误提示*/    </style>    <script>        function crtTable(){            //创建表格节点            var oTabNode=document.createElement("table");            //创建tbody节点            var oTbdNode=document.createElement("tbody");            //创建行节点            var oTrNode=document.createElement("tr");            //创建单元格节点            var oTdNode=document.createElement("td");            oTdNode.innerHTML="这是单元格";            //让这些节点有关系            oTrNode.appendChild(oTdNode);            oTbdNode.appendChild(oTrNode);            oTabNode.appendChild(oTbdNode);           document.getElementsByTagName('div')[0].appendChild(oTabNode);        }      /*上面的方法很麻烦，应该使用表格节点对象的方法来完成      表格是由由行组成，表格节点对象中insertRow方法来完成创建行并添加的动作      行是由单元格组成,由对象中的insertCell方法来完成      * */        function crtTable1(){            var oTabNode=document.createElement("table");            for(var i=1;i<=5;i++) {                var oTrNode = oTabNode.insertRow();                for(var j=1;j<=6;j++) {                    var oTdNode = oTrNode.insertCell();                    oTdNode.innerHTML = i+"--"+j;                }            }            //将表格节点添加到div中            document.getElementsByTagName('div')[0].appendChild(oTabNode);            //点击之后不能操作buttom            document.getElementsByName("crtBut")[0].disabled=true;        }    </script></head><body>        <!--在页面中创建一个5行6列表格        -->    <input type="button" value="创建表格" name="crtBut" onclick="crtTable1()">    </hr>    <div>    </div></body></html>

2.css设置表格属性

table{    border: #249bdb 1px solid;    width: 500px;    border-collapse: collapse;}table td{    border: #249bdb 1px solid;    padding: 10px;}

0 0