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

最新推荐文章于 2022-04-19 12:32:23 发布

qq_34734520

最新推荐文章于 2022-04-19 12:32:23 发布

阅读量321

点赞数

分类专栏： java之DOM

本文链接：https://blog.csdn.net/qq_34734520/article/details/51589882

版权

java之DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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" οnclick="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;
}

qq_34734520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom-创建表格-使用表格对象

web-strom开发1.创建表格的2种方法创建表格 /*table.css文件在文章末尾*/ /*@import url(table.css);错误提示*/ function crtTable(){ //创建表格节点 var oTabNode=doc
复制链接

扫一扫