DOM（二）-11-(示例-行颜色间隔显示并高亮)

来源：互联网发布：图片放大软件编辑：程序博客网时间：2024/06/05 20:48

表格样式table.css代码

table{border:##249bdb 1px solid;width:500px;border-collapse:collapse;}table td{border:#249bdb 1px solid;padding:5px;/*td左边顶格*/}table th{border:#249bdb 1px solid;padding:5px;background-color: rgb(200,200,200);/*可以通过这种方式设置背景色*/}

主程序代码：

<!--添加功能1：表格行与行之间间隔颜色显示，即第一行红色，第二行绿色，……添加功能2：鼠标停留在哪一行，该行呈现高亮状态--><!-- 【注意】这里需要对表格多个行进行样式操作，所以将js代码写在<head>中 --><html><head><style type="text/css">@import url(table.css);/*预先定义两个样式，让表格行在加载时自动带上样式*/.one{/*表格奇数行样式*/background-color:#e1e16a;}.two{/*表格偶数行样式*/background-color:#75f094;}.over{/*高亮的样式（用于鼠标悬停某行）*/background-color:#f9360d;}</style><script type="text/javascript">function trColor(){/* *思路： *1.因为要操作行的样式，所以要先获取表格对象。 *2.获取所有被操作的行对象。 *3.遍历行并给每一行指定样式。 *///获取表格节点对象var oTabNode = document.getElementById("info");//获取表格所有行var collTrNodes = oTabNode.rows;/* *因为表格第一行是“姓名”“年龄”等信息，所以第一行不需要设置样式，从第二行开始遍历，又因为表格 *第一行对应角标是0，第二行是1，所以for循环从1开始。 *///定义一个变量name，用于在for循环内记录每行当前样式，从而便于for循环内部的第二个function，即鼠标离开恢复var name;for(var x=1;x<collTrNodes.length;x++){if(x%2==1){//判断当前被遍历到的行是奇数行还是偶数行collTrNodes[x].className = "one";}else{collTrNodes[x].className = "two";}//给每一个行对象添加两个事件，第一个是鼠标悬停在该行的效果，第二个是鼠标离开该行后样式效果恢复/* *需要做鼠标悬停在某一行，该行高亮，鼠标离开该行，效果恢复，所以在tr行标签添加事件： *（1）onmouseover：鼠标悬停状态（over意为在...上） *（2）onmouseout：鼠标离开状态（out以为从...出去） *且这（1）和（2）可以看作tr节点对象的属性。 */collTrNodes[x].onmouseover = function(){//做鼠标悬停某行高亮name = this.className;//先记录下当前该行样式，为了下方的“做鼠标离开某行效果恢复”this.className = "over";}collTrNodes[x].onmouseout = function(){//做鼠标离开某行效果恢复this.className = name;//离开某行其className属性恢复成为name}}}/* *如果在js脚本里面调用自定义函数trColor()，然后刷新网页，没效果 *【原因】在运行时候，先加载上面的js脚本文件，由于自定义函数没被调用所以暂时不加载，然后运行到trColor()行 *加载自定义函数trColor()，此时由于下方<body>内的表格没有加载，导致自定义函数trColor()内的表格节点对象 *oTabNode值为null（表格还没加载，哪来的id?没有id又怎么能通过getElementById()方法获取节点对象？），所以 *导致刷新网页没效果。 *【注意】这个是开发时候常见问题。 *///trColor();所以一般不直接这么写//一般是在表格加载完后调用自定义方法trColor()，代码如下：onload = function(){trColor();}</script></head><body><table id="info"><tr><th>姓名</th><th>年龄</th><th>地址</th></tr><tr><td>张三</td><td>27</td><td>上海</td></tr><tr><td>小强</td><td>26</td><td>北京</td></tr><tr><td>李四</td><td>29</td><td>广州</td></tr><tr><td>孙八</td><td>23</td><td>南京</td></tr><tr><td>二麻子</td><td>19</td><td>大连</td></tr><tr><td>犀利姐</td><td>32</td><td>青岛</td></tr><tr><td>旺财</td><td>19</td><td>深圳</td></tr><tr><td>周七</td><td>42</td><td>铁岭</td></tr><tr><td>毕姥爷</td><td>18</td><td>沈阳</td></tr></table></body></html>

0 0