您的位置：首页 > Web前端 > HTML

HTML鼠标在单元格上单击，单元格反色，可以利用方向键移动反色效果

2017-11-30 08:33 351 查看

表格未单击时

单击相应单元格，单元格变色

按下方向键右键效果右移，按着不动，持续移动，直到松开按键

按下方向键上键效果上移，按着不动，持续移动，直到松开按键

按下方向键下键效果下移，按着不动，持续移动，直到松开按键

按下方向键左键效果左移，按着不动，持续移动，直到松开按键

<!doctype html>

<html>

<head>



<style>
td{
text-align:center;
width:100px;
height:30px;
}

</style>

<script>
var i=0;//列指针
var k=0;//表格是否存在焦点标志位
var j=0;//行指针
var c;//setIntervel()函数的返回值
var js=0;//保证onkeydown事件只触发一次函数

/*单击使单元格变色并反馈单元格位置*/

function mouseover(event){
var table1=document.getElementById("table1");//获取表格元素
table1.rows[j].cells[i].style.color="black";//将上一个变色单元格恢复原样
table1.rows[j].cells[i].style.backgroundColor="white";
for(var row=0;row<4;row++){//遍历表格，找出当前获得焦点的单元格
for(var col=0;col<3;col++){
if(table1.rows[row].cells[col]==event.target){
j=row;
i=col;
}
}
}
k=1;
var cc=event.target;//获得触发事件的元素的父节点，如果直接返回触发事件的元素则是返回td而不是tr
cc.style.backgroundColor="black";//将被点击的单元格获得焦点
cc.style.color="white";
cc.focus();

}

/*鼠标移开时单元格恢复*/

function mouseout(event){
var cc=event.target;//将获得焦点的元素恢复原状
cc.style.backgroundColor="white";
cc.style.color="black";
k=0;

}

/*右移函数*/

function right(){
clearTimeout(c);//清除setTimeout()
huifu();
i++;//列自加
if(i==3){//列到头了
i=0;//重新计数
j++;//行数加一
}
if(j==table1.rows.length){//行到头了，重新计数
j=0;
}
fanse();
c=setTimeout("right()",300);//设置定时

}

/*左移函数*/
function left(){
clearTimeout(c);
huifu();
i--;//列自减
if(i<0){//如果列左边到头
i=2;//重新循环
j--;//行数自减
}
if(j<0){//如果行数向上自减到头
j=4;//行数重新循环
}
fanse();
c=setTimeout("left()",300);

}
/*恢复颜色函数*/
function huifu(){
var table1=document.getElementById("table1");
table1.rows[j].cells[i].style.color="black";//当前单元格恢复
table1.rows[j].cells[i].style.backgroundColor="white";
}
/*反色函数*/
function fanse(){
var table1=document.getElementById("table1");
table1.rows[j].cells[i].style.color="white";//当前单元格反色
table1.rows[j].cells[i].style.backgroundColor="black";
}
/*下移函数*/
function down(){
clearTimeout(c);//清除循环
huifu();
j++;//行数自加
if(j>4){
j=0;//如果行到头了，重新循环
}
fanse();
c=setTimeout(c);
}
/*上移函数*/
function up(){
clearTimeout(c);
huifu();
j--;//行数自减
if(j<0){//如果行到头了，重新开始循环
j=4;
}
fanse();
c=setTimeout(c);
}
/*触发keydown函数*/

document.onkeydown=function keydown(event){//触发文件的onkeydown事件
if(event.keyCode==39&&js==0&&k==1){//如果按键编码是39，则表明是方向键右键，如果标志位是0则触发一次，如果k=1,则表示当前表格有变色的单元格，可以使用方向键了，以下代码解释相同
js=1;//触发结束后标志位置1，不再重复执行该脚本
right();//按照300ms的时间循环执行右移代码
}
if(event.keyCode==40&&js==0&&k==1){
js=1;
down();
}
if(event.keyCode==37&&js==0&&k==1){
js=1;
left();
}
if(event.keyCode==38&&js==0&&k==1){
js=1;
up();
}
};
/*按键弹起时函数*/

document.onkeyup=function keyup(event){//当按键弹起时
c=clearTimeout(c);//清除单元格移动循环
js=0;//是否执行keydown（event）中相应代码的标志位复位
};

</script>

<meta charset="UTF-8">

</head>

<body>

<table id="table1" cellspacing="1" cellpadding="1">

<tr onclick="mouseover(event)" onmouseout="mouseout(event)">
<th>姓名</th><th>年龄</th><th>性别</th>

&l
9beb
t;/tr>

<tr onclick="mouseover(event)" onmouseout="mouseout(event)">
<td>奥巴马</td><td>50</td><td>男</td>
</tr>

<tr onclick="mouseover(event)" onmouseout="mouseout(event)">
<td>川普</td><td>60</td><td>男</td>
</tr>

<tr onclick="mouseover(event)" onmouseout="mouseout(event)">
<td>三胖</td><td>30</td><td>男</td>
</tr>

<tr onclick="mouseover(event)" onmouseout="mouseout(event)">
<td>习近平</td><td>50</td><td>男</td>
</tr>
</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML

相关文章推荐

新的分享

章节导航