动态生成table_动态生成一个table-CSDN博客

本文链接：https://blog.csdn.net/swanhung/article/details/7951851

<!DOCTYPE HTML>
<html>
<head>
<title>动态生成table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-size:12px;font-family:"微软雅黑";}
#btn{background:#333;width:80px;height:25px;line-height:25px;color:#fff;text-align:center;display:inline-block;text-decoration:none;border-radius:5px;}
table{border:1px solid #666;}
td{border:1px solid #222;padding:10px;cursor:pointer;}
#color{width:30px;height:30px;margin:0 5px;display:inlineblock;}
#num{color:#f60;margin:0 5px;font-size:15px;}-
#his{font-size:14px;font-weight:500;}
</style>
</head>

<body>
<div>
<label>行数<input type="text" value="" id="row"></label><label>列数<input type="text" value="" id="col"></label><a href="javascript:void(0)" id="btn">生成表格</a>
</div>
<div id='b_s' style="display:none">你所选择的区域是<span id="num"></span>,颜色为<span id="color"></span><em id="his"></em></div>
<div id="ta"></div>
<script type="text/javascript">
function $(obj)
{
return document.getElementById(obj);
}
window.οnlοad=function(){
var _row=$("row");
var _col=$("col");
var _btn=$("btn");
_btn.οnclick=function(){
var _ta=$("ta");
_ta.innerHTML='';
$("b_s").style.display="none";
if(_row.value == "")
{
alert("输入下会死啊");
_row.focus();
}
else if(isNaN(_row.value))
{
alert("非数字的");
_row.select();
}
else if(_col.value =="")
{
alert("输00000");
_col.focus();
}
else if(isNaN(_col.value))
{
alert("非数字的飘过");
_col.select();
}
else
{
var _rowF=parseInt(_row.value);
var _colF=parseInt(_col.value);
var _table=document.createElement("table");
for(var i=0;i<_rowF;i++)
{
var _tr=document.createElement("tr");
for(var n=0;n<_colF;n++)
{
var _td=document.createElement("td");
_td.innerHTML=Math.floor(Math.random() * 10);
_tr.appendChild(_td);
_td.style.backgroundColor="#"+BgColor();

}
_table.appendChild(_tr);

}
_ta.appendChild(_table);
_row.value="";
_col.value="";
tdClick();
}
}
function BgColor()//随机背景
{
var bg=Math.ceil(Math.random() * 12651548).toString(16);
if(bg.length < 6)
{
"0"+ bg
}
return bg
}
function tdClick(){
var _tds=$("ta").getElementsByTagName("td");
console.log(_tds.length+"33")
for(var i=0;i<_tds.length;i++){
_tds[i].οnclick=function(){
console.log("s")
$("b_s").style.display="block";
$("num").innerHTML=this.innerHTML;
$("color").style.backgroundColor=this.style.backgroundColor;
$("his").innerHTML=this.style.backgroundColor;
}
}
}
}
</script>
</body>
</html>