<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="inp1" id="inp1" value="" />
<input type="text" name="" id="inp2" value="" />
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box">
</div>
</body>
</html>
<script type="text/javascript" src="../public.js">
</script>
<script type="text/javascript">
function $id(id){
return document.getElementById(id);
}
$id("btn").onclick=function(){
//得到表格的行与列
var inp1=$id("inp1").value;
var inp2=$id("inp2").value;
var table=document.createElement("table");
table.border="1";
for (var i = 0; i < inp1; i++) {
var row=document.createElement("tr");
for (var j = 0; j <=inp2; j++) {
var col=document.createElement("td");
col.innerHTML=getRand(0,99);
col.style.backgroundColor=getRandColor();
row.appendChild(col);
if(j==inp2){
col.innerHTML="";
col.style.backgroundColor="white";
var a=document.createElement("a");
a.innerHTML="删除";
a.href="#";
col.appendChild(a);
a.onclick=function(){
this.parentNode.parentNode.remove();
}
}
}
table.appendChild(row);
}
$id("box").appendChild(table);
}
</script>案例动态创建表格
猜你喜欢
转载自blog.csdn.net/qq_38068491/article/details/82991504
今日推荐
周排行