您的位置：首页 > 其它

DOM（二）-07-DOM(示例-创建表格)

2015-08-20 16:59 323 查看
表格样式table.css代码

@CHARSET "UTF-8";

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

table td{
border:#249bdb 1px solid;
padding:5px;/*td左边顶格*/
}
<pre name="code" class="html">主程序代码
<!--
需求：制作表格，让用户自己指定表格的行数和列数，这里先创建一个5行6列的表格。
-->

<!--
思路：
1.明确事件源，比如按钮，即单击按钮就创建一个表格；
2.必须有一个生成的表格节点存储位置，即表格创建后放在页面什么地方；
-->

<!-- 【特别注意】这里是将css样式单独定义成一个css文件，然后在本程序导入即可 -->

<html>
<head>
<style type="text/css">
@import url(table.css);
</style>
</head>
<body>
<script type="text/javascript">

function createTable(){//定义事件功能

/*
* 思路：
* 可以通过之前学过的createElement创建元素的形式来完成
*/
//1.创建表格节点
var oTabNode = document.createElement("table");

//2.创建tBody节点
var tTbodyNode = document.createElement("tbody");

//3.创建行节点tr
var oTrNode = document.createElement("tr");

//4.创建单元格节点td
var oTdNode = document.createElement("td");

oTdNode.innerHTML = "这是单元格";

//5.让这些节点有关系，进行指定层次的节点添加
oTrNode.append(oTdNode);

oTbodyNode.appendChild(oTrNode);

oTabNode.appendChild(oTbodyNode);

//获取div节点，并将已创建的表格加入到div区域
document.getElementsByTagName("div")[0].append(oTabNode);

}

</script>
<input type="button" value="创建表格" onclick="createTable()" />

<hr/>

<div></div>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航