码迷,mamicode.com
首页 > Web开发 > 详细

运用js创建表格

时间:2017-11-26 20:26:03      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:ext   for   append   created   fun   ota   ack   document   nbsp   

<html>
    <head>
        <title>运用js创建表格</title>
    </head>
    <body>
        <table>
        </table>
    
    
    <script type="text/javascript">
    
        /*function createTable(){
            var body = document.body;
            
            var table = document.createElement("table");
            
            var tr = document.createElement("tr");
            
            var td = document.createElement("td");
            
            var txt = document.createTextNode("hello,world");
            
            td.appendChild(txt);
            tr.appendChild(td);
            table.appendChild(tr);
            table.style.border = "1px solid black";
            
            body.appendChild(table);
            
        }*/
        
        
        function createDuoTable(){
            var body = document.body;
            var table = document.createElement("table");
            for(var i=0;i<4;i++){
                
                var tr = document.createElement("tr");
                
                var td = document.createElement("td");
                
                var txt = document.createTextNode("hello,world");
                
                td.appendChild(txt);
                tr.appendChild(td);
                table.appendChild(tr);
                td.style.border = "1px solid black";
                if(i%2){
                    tr.style.backgroundColor = "#DDD";
                } else {
                    tr.style.backgroundColor = "green";
                }
                
            }
            table.style.border = "1px solid black";
            body.appendChild(table);
            
        }
        
        createDuoTable();
    </script>
    
    
    </body>
</html>

 

 

效果如下:

技术分享图片

运用js创建表格

标签:ext   for   append   created   fun   ota   ack   document   nbsp   

原文地址:http://www.cnblogs.com/luowenjun-kio/p/7899920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!