作业15 创建表格（v2）
主要内容
使用自定义对象，实现页面输入表格参数，生成表格。
代码
<html>
<head>
<title>创建表格</title>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
#namewindow {
background: linear-gradient(rgba(229, 255, 8, 0.841), rgba(0, 225, 255, 0.404));
width: 250px;
height: 200px;
position: fixed;
left: 100px;
top: 80px;
font: 20px/180% "Microsoft YaHei", "微软雅黑", "宋体";
text-align: center;
}
</style>
</head>
<body>
<h3 style="border: 10px;color: brown;text-align: center;">
<table>
<tr>
<td>行数:</td>
<td><input type="text" id="row" value="5"></td>
</tr>
<tr>
<td>列数:</td>
<td><input type="text" id="col" value="6"></td>
</tr>
<tr>
<td>行高:</td>
<td><input type="text" id="height" value="58"></td>
</tr>
<tr>
<td>列宽:</td>
<td><input type="text" id="width" value="50"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" id="createTable" onclick="createTable()" value="创建"></td>
</tr>
</table>
</h3>
<script>
function Table(row, col, height, width) {
this.row = row;
this.col = col;
this.height = height;
this.width = width;
this.show = function() {
document.write("<table align='center' border='1px'><br>");
for (var i = 1; i <= this.row; i++) {
document.write("<tr>");
for (var j = 1; j <= this.col; j++) {
document.write("<td align='center' width=" + this.width + "px" + " height=" + this.height + "px" + ">" + i + "-" + j + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
}
function createTable() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var height = document.getElementById("height").value;
var width = document.getElementById("width").value;
var table1 = new Table(row, col, height, width);
table1.show();
}
</script>
<div id="namewindow">
<p>姓名:罗xx</p>
<br>
<p>专业: 计算机应用技术x班</p>
<br>
<p>学号: 226501XXXXX</p>
</div>
</body>
</html>懒得截图了
HTML文件
15.html
html文件
2.3K
没有回复内容