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

来源：互联网发布：youtube下载视频软件编辑：程序博客网时间：2024/05/22 00:36

表格样式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.创建行节点trvar oTrNode = document.createElement("tr");//4.创建单元格节点tdvar 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>

0 0