<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
行：<input type="text" id="r" />
列：<input type="text" id="c" />
<input type="button" value="创建" id="btn"/>
<div id="container">
</div>
</body>
</html>
<script src="../public.js"></script>
<script type="text/javascript">
$id("btn").onclick = function(){
//每次点击按钮时 先清空container中的内容
$id("container").innerHTML = "";
//获取行和列
var row = $id("r").value;
var col = $id("c").value;
//创建一个table标签
var tab = document.createElement("table");
tab.border = 1;
//将table添加到container容器中
$id("container").appendChild(tab);
for( var i = 1 ; i <= row ; i++ ){
var tr = document.createElement("tr");
for( var j = 1 ; j <= col ; j++ ){
var td = document.createElement("td");
td.innerHTML = rand(1,100);
td.style.backgroundColor = getColor();
tr.appendChild( td );
}
//在每一行的末尾处添加一个td 内容是一个按钮
var tdEnd = document.createElement("td");
tdEnd.innerHTML = "<input class='del' type='button' value='删除'>";
tr.appendChild( tdEnd );
//每一行结束后 将 tr添加到table中
tab.appendChild( tr );
}
//找页面中的所有删除按钮
var oBtns = document.getElementsByClassName("del");
//为每一个按钮添加单击事件
for( var i = 0 ; i < oBtns.length ; i++ ){
oBtns[i].onclick = function(){
if( confirm("确定要删除么？") ){
//删除当前按钮所在的行
this.parentNode.parentNode.remove();
}
}
}
}
</script>