表格练习demo
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td {border: 1px solid black;background-color: #eee;width: 50px;height: 50px}
td:hover {border: 1px solid red;background-color: deepskyblue}
</style>
</head>
<body>
<input type="text" placeholder="行" class="i">
<input type="text" placeholder="列" class="i1">
<input type="button" value="创建" id="bt">
<span class="s"></span>
<hr>
<script>
var x = "x";
var y = "y";
var oi = document.querySelector(".i");
var oi1 = document.querySelector(".i1");
var obt = document.querySelector("#bt");
var os = document.querySelector(".s");
os.innerText = "(" + x + "," + y + ")";
oi.addEventListener("blur", run1);
oi1.addEventListener("blur", run2);
// 输入框与显示span同步
function run1() {
os.innerText = "(" + this.value + "," + y + ")";
x = this.value;
}
function run2() {
os.innerText = "(" + x + "," + this.value + ")";
y = this.value;
}
obt.addEventListener("click", run);
// 关键方法，根据参数创建表格
function run() {
var td = "";
var tr = "";
for (var i = 0; i < y; i++) {
td += "<td>" + (i + 1) + "</td>";
}
for (var i = 0; i < x; i++) {
tr += "<tr>" + td + "</tr>";
}
var str = "<table>" + tr + "</table>";
document.body.innerHTML += str;
}
</script>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了，么么哒！