学步园

看了很多人的代码,特别是一些鼠标移进移出变色的代码块,真是一个字,惨啊

<tr onMouseOver="this.bgColor='#ff0000'" onmouseout="this.bgColor='#cccccc'">
        <td>内容</td>
</tr>
<tr onMouseOver="this.bgColor='#ff0000'" onmouseout="this.bgColor='#cccccc'">
        <td>内容</td>
</tr>
<tr onMouseOver="this.bgColor='#ff0000'" onmouseout="this.bgColor='#cccccc'">
        <td>内容</td>
</tr> 
.....

 

现在给你一种更方法更易维护的方法,首先输出html代码如下

<table id="onTab">
      <tr>
            <td>标韪栏我颜色不变</td>
      </tr>
      <tr rel="onMouse">
            <td>内容栏我颜色想变</td>
      </tr>
      <tr rel="onMouse">
            <td>内容栏我颜色想变</td>
      </tr>
      <tr rel="onMouse">
            <td>内容栏我颜色想变</td>
      </tr>
</table>
<script type="text/javascript">trBgColor("onTab");</script>

当显示完后,在使用js 调用 函数如 trBgColor

 

function trBgColor(obj){
    var x = document.getElementById(obj); //只读id为obj值的内容块
    var y = x.getElementsByTagName("tr"); //读tr
    for (var i=0;i<y.length;i++){
        if(y[i].getAttribute("rel") == "onMouse"){
              //只有当tr元素 rel为 onMouse才值行以下操作,你也可以去掉这个条件
              y[i].onmouseover=xxxover; //移进
              y[i].onmouseout=xxxout;   //移出
              y[i].ondblclick=xxxdbl; //还可以加个双击事件,你也可以加onclick等等各事件
        }
    }
}
function xxxover(){
    this.style.background="#ffc";
}
function xxxout(){
    this.style.background="#fff";
}
function xxxdbl(){
    alert("你双击我了");
}