zoukankan      html  css  js  c++  java
  • DOM_节点操作创建表格

    <html>
    <head>
    <style type="text/css">
    table{
        border:#afccdd 1px solid;
        width;500px;
        border-collapse:collapse;
        }
    table td{
        border:#afccdd 1px solid;
        padding:5px;
        }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    function cretable(){
        var hang = document.getElementsByName("hang")[0];
        var rownum = parseInt(hang.value);
        var lie = document.getElementsByName("lie")[0];
        var cellnum = parseInt(lie.value);
        var otabNode = document.createElement("table");
        for(var x =1;x<=hang.value;x++){
            var otrNode = otabNode.insertRow();
                for(var y =1;y<=lie.value;y++){
                     var otdNode = otrNode.insertCell();
                     otdNode.innerHTML="<font color='green'>java</font>";
                    }
        }
        document.getElementsByTagName("div")[0].appendChild(otabNode);
        document.getElementsByName("cretab")[0].disabled=true; //按钮属性disabled=true使按钮只能执行一次就变灰
        
    }
    </script>
    行:<input name="hang" type="text" value="" />
    列:<input name="lie" type="text" value="" />
    <input type="button" value="创建表格" name="cretab" onclick="cretable()"/>
    <div></div>
    </body>
    </html>

    思路:

    1、创建html标签

    2、编写css样式

    3、创建table节点对象

    4、创建tr节点对象

    5、创建td节点对象(如果不适用table对象中的方法insertRow();就需要产生关系;但是原理都一样)

    6、将table节点对象加入到div标签中

    <html>
    <head>
        <style type="text/css">
     table{
         border:#ccff00 1px solid;
         color:#ccff00;
         background-color:#adddfa;
         }
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="添加表格" name="but" onclick="cretable()"/>
        <script type="text/javascript">
        function cretable(){
            var tabNode = document.createElement("table");
            var tdyNode = document.createElement("tbody");
            var trNode = document.createElement("tr");
            var tdNode  = document.createElement("td");
            tdNode.innerHTML="javascript";
            trNode.appendChild(tdNode);
            tdyNode.appendChild(trNode);
            tabNode.appendChild(tdyNode);
            document.getElementsByTagName("div")[0].appendChild(tabNode);
        }
        </script>
    </body>
    </html>
  • 相关阅读:
    随笔2
    随笔
    关于updateElement接口
    随笔1
    本地访问正常,服务器访问乱码 记录
    Redis (error) NOAUTH Authentication required.解决方法
    tomcat启动很慢 停留在 At least one JAR was scanned for TLDs yet contained no TLDs.
    微信公众号消息回复
    微信公众号 报token验证失败
    idea中web.xml报错 Servlet should have a mapping
  • 原文地址:https://www.cnblogs.com/wangyinxu/p/7126667.html
Copyright © 2011-2022 走看看