javascript编程之使用js完成当光标放到表格某一行时高亮显示

隔行换色,那么发生在行上,所以事件写在行上,onmouseover为鼠标移动到该区域,onmouseout为鼠标移出该区域,无论移出,还是移入都调用check方法,这个方法传递两个参数(“”中加引号只能用单引号‘’),第一个是所在行的id用于获取改行,另一个是类型,over表示移入,out表示移出,方法内部根据这两个参数来判断具体情况,over时背景颜色为红色,表示高亮显示,out时背景颜色为白色,效果为

光标放在第一行

光标离开第一行

上面完成了基本的要求,但是他还有以下不足之处,比如给每行都添加了事件,如果行太多,这种静态的添加事件不太合适,所以我们应该动态遍历到所有的行,然后js中动态添加方法,这样就不用给每一行,动态的添加事件了,而且在上面代码中是在js中设置了背景颜色,这样不好应该js和css分开,所以只要在js中设置好移入时行的classname,然后css中显示移入时的样式,和移出时行的classname,然后css中显示移出时的样式

以上程序就是动态给每行添加了移入和移出两个事件,然后方法内部设置成每行在移入移出时不同的className,不同的className对应不同的样式,所以就会产生不同的效果了。

注意这里是this,而不是trs[x],因为这里添加事件之后,事件只会在onmouseover的时候才会运行,就是鼠标移入的时候,而运行的时候根本不知道tr[x]是什么了,所以这里只能用this,this表示当前事件的源对象,把当前事件的源对象的className设置成对应的样子即可。

js中常用事件的总结

onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适。

onclick/ondblclick:鼠标单击和双击事件

onkeydown/onkeypress:搜索引擎使用较多,比如一回车他就自动搜索

onload:页面加载事件,所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称,那么在html页面中只能写一个。

onmouseover/onmouseout/onmousemove:购物网站商品详情页。

onsubmit:表单提交事件 ,有返回值,控制表单是否提交。

onchange:当用户改变内容的时候使用这个事件(二级联动)

onkeypress举例

function keyDemo(){

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180304A0IV9O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券