<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function createBtn(){
var rows=document.getElementById("rows").value;
var columns=document.getElementById("columns").value;
var content=document.getElementById("content");
mybody = document.getElementsByTagName("body")[0];
var oTable=document.createElement("table");
var oTbody = document.createElement("tbody");
oTable.border="1";
oTable.appendChild(oTbody);
content.appendChild(oTable);
for(var i=0;i<rows;i++){
var oTr=oTbody.insertRow(i);
for(var j=0;j<columns;j++){
var oTd=oTr.insertCell(j);
oTd.bgColor="#CCCCCC";
oTd.id="tdName";
oTd.width="80px";
oTd.height="80px";
//给td动态添加事件
oTd.attachEvent("onclick",changeTdBgColor(i,j,oTable));
}
}
}
//改变背景色
function changeTdBgColor(i,j,oTable)
{
return function()
{
if(i>0){
workChangeTdBgColor(oTable.rows[i-1].cells[j]);
}
if(i<oTable.rows.length-1){
workChangeTdBgColor(oTable.rows[i+1].cells[j]);
}
if(j>0){
workChangeTdBgColor(oTable.rows[i].cells[j-1]);
}
if(j<oTable.rows[i].cells.length-1){
workChangeTdBgColor(oTable.rows[i].cells[j+1]);
}
}
}
function workChangeTdBgColor(oTd){
if(oTd.bgColor=="#ff0000"){
oTd.bgColor="#CCCCCC"
}else{
oTd.bgColor="red"
}
}
</script>
</HEAD>
<BODY>
行:<input type="text" id="rows" name="rows" value="3">
列:<input type="text" id="columns" name="columns" value="3">
<input type="button" value="开始" οnclick="createBtn()">
<hr />
<div id="content"></div>
</BODY>
</HTML>
扫一扫
6227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
