明白了 我已经留下规则部分你自己写了
因为字数限制分2段发 首先是HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head><body>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table1" align="right">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table2" align="right">
<tr>
<td width="20" height="20" bordercolor="#999999" bgcolor="#FF0000"> </td>
<td width="20" align="center" bordercolor="#999999" id="sred">0</td>
</tr>
<tr>
<td height="20" bordercolor="#999999" bgcolor="#FFFF00"> </td>
<td align="center" bordercolor="#999999" id="syellow">0</td>
</tr>
<tr>
<td height="20" bordercolor="#999999" bgcolor="#0000FF"> </td>
<td align="center" bordercolor="#999999" id="sblue">0</td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table3" align="right">
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</table>
</body>
</html>
因为字数限制分2段发 首先是HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head><body>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table1" align="right">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table2" align="right">
<tr>
<td width="20" height="20" bordercolor="#999999" bgcolor="#FF0000"> </td>
<td width="20" align="center" bordercolor="#999999" id="sred">0</td>
</tr>
<tr>
<td height="20" bordercolor="#999999" bgcolor="#FFFF00"> </td>
<td align="center" bordercolor="#999999" id="syellow">0</td>
</tr>
<tr>
<td height="20" bordercolor="#999999" bgcolor="#0000FF"> </td>
<td align="center" bordercolor="#999999" id="sblue">0</td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table3" align="right">
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</table>
</body>
</html>
<script language="javascript">
var boxs = new Array(); //元素缓存
var groups = new Array(); //组集合
var focusarray = 0; //指针
//数量
var cred = 0;
var cyellow = 0;
var cblue = 0;
//数量显示容器
var ored = document.getElementById("sred");
var oyellow = document.getElementById("syellow");
var oblue = document.getElementById("sblue");
//这个是table3的td集合
var groupsObj = document.getElementById("table3").cells;//按键事件
function document.onkeypress()
{
switch(window.event.keyCode)
{
case 45:
arrmove(-1);break; //"-"
case 43:
case 13: //"+" 和 Enter
arrmove(1);break;
case 47: //"/"
if(confirm("重置全部?"))
for(var i=0;i<boxs.length;i++)
changeColor(i,0);
break;
case 42://"*"
changeColor(focusarray,0);break;
case 49://"1"
changeColor(focusarray,1);break;
case 50://"2"
changeColor(focusarray,2);break;
case 51://"3"
changeColor(focusarray,3);break;
default:
break;
}
}
//方法:改变当前元素的颜色
function changeColor(index,icolor)
{
var simg = "";
//当前元素原颜色数量减1
switch(boxs[index].scolor)
{
case 1: cred--;break;
case 2: cyellow--;break;
case 3: cblue--;break;
}
//新颜色数量加1 并获取新颜色
switch(icolor)
{
case 0: simg = "";break;
case 1: simg = "image1.gif";cred++;break;
case 2: simg = "image2.gif";cyellow++;break;
case 3: simg = "image3.gif";cblue++;break;
}
boxs[index].scolor = icolor;//记录颜色标记
boxs[index].background = simg;//改变背景图
//显示颜色计数
ored.innerText = cred;
oyellow.innerText = cyellow;
oblue.innerText = cblue;
//组处理
var gindex = boxs[index].group;//获取当前组
//以下就是你的规则
var tempint = 0;//初始化一个数字
for(var i=0;i<groups[gindex].length;i++)//循环当前组内每个元素
{
switch(groups[gindex][i].scolor)
{
case 0://白色
tempint += 0;
break;
case 1://红
tempint += 1;
break;
case 2://黄
tempint += 2;
break;
case 3://蓝
tempint += 3;
break;
}
}
//规则到此结束
groupsObj[gindex].innerText = tempint;//将数字显示在table3中相应的位置
}
//方法 指针移动
function arrmove(num)
{
boxs[focusarray].borderColor = "#999999";//改变前指针所指元素的边框颜色
focusarray+=num;//改变指针
//防止溢出
if(focusarray<0)focusarray+=30;
if(focusarray>29)focusarray-=30;
boxs[focusarray].borderColor = "#FF0000";//改变当前指针所指元素的边框颜色
}function window.onload()
{
var tablebox = document.getElementById("table1");
var temparr = new Array();//创建一个新组
for(var i=0;i<tablebox.cells.length;i++)
{
//分组过程
if(i!=0 && i%4==0)
{
groups.push(temparr);//将一个组放入 组的集合里
temparr = new Array(); //创建一个新组
}
var tempobj = tablebox.cells[i];
with(tempobj)
{
onclick = function(){arrmove(this.boxindex-focusarray);}//添加鼠标单击时事件
style.cursor = "hand";//鼠标指针
align = "center";//对齐
width = 20;//宽
height = 20;//高
borderColor = "#999999";//边框颜色
setAttribute("boxindex",i);//位置标记
setAttribute("scolor",0);//颜色标记
setAttribute("group",groups.length)
}
boxs.push(tempobj);//加入缓存
temparr.push(tempobj);//加入组
}
if(i%4>0)groups.push(temparr);//将 最后几个单元格(不足4个的组)加入组集合 想丢掉这多余的几个就不要这行
//设置table3的基本属性
tablebox = document.getElementById("table3");
for(var i=0;i<tablebox.cells.length;i++)
{
var tempobj = tablebox.cells[i];
with(tempobj)
{
align = "center";//对齐
width = 20;//宽
height = 20;//高
borderColor = "#999999";//边框颜色
}
}
focusarray = 0;//指针归零
arrmove(0);//触发方法
//显示颜色计数归零
ored.innerText = 0;
oyellow.innerText = 0;
oblue.innerText = 0;
}
</script>
3、当焦点停留在某个文本域内时，可以修改其内容，但不影响原表格1内的颜色改变（现在会影响的）；怕结贴之后不能问了，所以晚些发分，希望不要见怪，：）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head><body>
1:<input type="text" name="inputbox" size="10">
2:<input type="text" name="inputbox" size="10">
3:<input type="text" name="inputbox" size="10">
4:<input type="text" name="inputbox" size="10">
5:<input type="text" name="inputbox" size="10"><table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table2">
<tr>
<td width="20" height="20" bordercolor="#999999" bgcolor="#FF0000"> </td>
<td width="20" align="center" bordercolor="#999999" id="sred">0</td>
</tr>
<tr>
<td height="20" bordercolor="#999999" bgcolor="#FFFF00"> </td>
<td align="center" bordercolor="#999999" id="syellow">0</td>
</tr>
<tr>
<td height="20" bordercolor="#999999" bgcolor="#0000FF"> </td>
<td align="center" bordercolor="#999999" id="sblue">0</td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table3">
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</table>
</body>
</html>
var boxs = new Array(); //元素缓存
var groups = new Array(); //组集合
var focusarray = 0; //指针
var inputsarray = 0;//输入框指针
var inputflag = false;//输入标记
//数量
var cred = 0;
var cyellow = 0;
var cblue = 0;
//数量显示容器
var ored = document.getElementById("sred");
var oyellow = document.getElementById("syellow");
var oblue = document.getElementById("sblue");var groupsObj = document.getElementById("table3").cells;//table3的td集合
var inputs = document.getElementsByName("inputbox"); //input集合 如果input的name不相同 则用下面的
//var inputs = new Array();
//inputs.push(document.getElementById("input1"));
//inputs.push(document.getElementById("input2")); ....//按键事件
function document.onkeypress()
{
switch(window.event.keyCode)
{
case 45:
if(!inputflag)arrmove(-1);break; //"-"
case 43:
case 13: //"+" 和 Enter
if(!inputflag)arrmove(1);break;
case 47: //"/"
if(confirm("重置全部?"))
for(var i=0;i<boxs.length;i++)
changeColor(i,0);
break;
case 42://"*"
changeColor(focusarray,0);break;
case 49://"1"
changeColor(focusarray,1);break;
case 50://"2"
changeColor(focusarray,2);break;
case 51://"3"
changeColor(focusarray,3);break;
case 46://"."
moveinput();//触发方法
return false; //取消输入 如果需要输入 "." 则注释掉 但会冲突
break;
default:
break;
}
}
//方法:按下"."
function moveinput()
{
if(!inputflag)
{
//输入开关false
inputs[0].focus(); //聚焦第一个input
}
else
{
//输入开关true
inputs[inputsarray].blur(); //取消聚焦 当前input
if(inputs[inputsarray+1]) //如果不是最后一个input
inputs[inputsarray+1].focus(); //聚焦下一个input
else
{
inputflag = false; //输入标记 false
arrmove(0);//返回table1
}
}
}
//方法:改变当前元素的颜色
function changeColor(index,icolor)
{
if(inputflag)return;
var simg = "";
//当前元素原颜色数量减1
switch(boxs[index].scolor)
{
case 1: cred--;break;
case 2: cyellow--;break;
case 3: cblue--;break;
}
//新颜色数量加1 并获取新颜色
switch(icolor)
{
case 0: simg = "";break;
case 1: simg = "image1.gif";cred++;break;
case 2: simg = "image2.gif";cyellow++;break;
case 3: simg = "image3.gif";cblue++;break;
}
boxs[index].scolor = icolor;//记录颜色标记
boxs[index].background = simg;//改变背景图
//显示颜色计数
ored.innerText = cred;
oyellow.innerText = cyellow;
oblue.innerText = cblue;
//组处理
var gindex = boxs[index].group;//获取当前组
//以下就是你的规则
var tempint = 0;//初始化一个数字
for(var i=0;i<groups[gindex].length;i++)//循环当前组内每个元素
{
switch(groups[gindex][i].scolor)
{
case 0://白色
tempint += 0;
break;
case 1://红
tempint += 1;
break;
case 2://黄
tempint += 2;
break;
case 3://蓝
tempint += 3;
break;
}
}
//规则到此结束
groupsObj[gindex].innerText = tempint;//将数字显示在table3中相应的位置
}
//方法 指针移动
function arrmove(num)
{
boxs[focusarray].borderColor = "#999999";//改变前指针所指元素的边框颜色
focusarray+=num;//改变指针
//防止溢出
if(focusarray<0)focusarray+=30;
if(focusarray>29)focusarray-=30;
boxs[focusarray].borderColor = "#FF0000";//改变当前指针所指元素的边框颜色
}function window.onload()
{
var tablebox = document.getElementById("table1");
var temparr = new Array();//创建一个新组
for(var i=0;i<tablebox.cells.length;i++)
{
//分组过程
if(i!=0 && i%4==0)
{
groups.push(temparr);//将一个组放入 组的集合里
temparr = new Array(); //创建一个新组
}
var tempobj = tablebox.cells[i];
with(tempobj)
{
onclick = function(){arrmove(this.boxindex-focusarray);}//添加鼠标单击时事件
style.cursor = "hand";//鼠标指针
align = "center";//对齐
width = 20;//宽
height = 20;//高
borderColor = "#999999";//边框颜色
setAttribute("boxindex",i);//位置标记
setAttribute("scolor",0);//颜色标记
setAttribute("group",groups.length)
}
boxs.push(tempobj);//加入缓存
temparr.push(tempobj);//加入组
}
if(i%4>0)groups.push(temparr);//将 最后几个单元格(不足4个的组)加入组集合 想丢掉这多余的几个就不要这行
//设置table3的基本属性
tablebox = document.getElementById("table3");
for(var i=0;i<tablebox.cells.length;i++)
{
var tempobj = tablebox.cells[i];
with(tempobj)
{
align = "center";//对齐
width = 20;//宽
height = 20;//高
borderColor = "#999999";//边框颜色
}
}
for(var i=0;i<inputs.length;i++)
{
inputs[i].setAttribute("sindex",i);//添加一个index属性
inputs[i].onfocus = function() //当聚焦时事件
{
inputflag = true; //输入开关
inputsarray = this.sindex; //设定input指针
boxs[focusarray].borderColor = "#999999";//改变前指针所指元素的边框颜色
}
}
focusarray = 0;//指针归零
arrmove(0);//触发方法
//显示颜色计数归零
ored.innerText = 0;
oyellow.innerText = 0;
oblue.innerText = 0;
}
</script>