- 技术博客
- HTML案例——动态创建表格(createElement方法)
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
行：
<input type="text" id='row' />
列：
<input type="text" id='col' />
<input type="button" value="创建" id="btn"/>
<div id="box"></div>
</body>
</html>
JS代码
<script type
="text/javascript">
function $id(id
){
return document
.getElementById(id
)
}
function rand(n
,m
){
return n
+parseInt(Math
.random()*(m
-n
+1));
}
function color(){
var result
= "#";
for(var i
=0;i
<6;i
++){
result
+= rand(0,15).toString(16)
}
return result
;
}
$id("btn").onclick = function(){
$id("box").innerHTML
= "";
var oTab
= document
.createElement("table");
oTab
.border
= 1;
var rTxt
= $id("row").value
;
var cTxt
= $id("col").value
;
for( var i
= 0 ; i
< rTxt
; i
++ ){
var oTr
= document
.createElement("tr");
for( var j
= 0 ; j
< cTxt
; j
++ ){
var oTd
= document
.createElement("td");
oTd
.innerHTML
= rand(1,100);
oTd
.style
.backgroundColor
= getColor();
oTr
.appendChild(oTd
);
}
oTab
.appendChild(oTr
);
}
$id("box").appendChild( oTab
);
var alist
= document
.getElementsByTagName("a");
for( var i
= 0 ; i
< alist
.length
; i
++ ){
alist
[i
].onclick = function(){
if( confirm("确定要删除么?") ){
this.parentNode
.parentNode
.remove();
}
}
}
}
</script
>
