表格样式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="创建表格" οnclick="createTable()" />
<hr/>
<div></div>
</body>
</html>