当鼠标移上时单元格出现边框的效果

当鼠标移上时单元格出现边框的效果

1.插入表格，并定义相应单元格上的应用到的CSS类。

<style>

td{font:normal 10px Tahoma;text-align:center}

.s0{color:red}

.s1{color:green}

.s2{color:blue}

.border1{border:1px solid #666666;background:#DEDEDE;color:#333333}

</style>

<table width="310" height="50" border="1" cellpadding="0" cellspacing="0" bordercolor="#eeeeee" bgColor="#eeeeee">

  <tr>

    <td class="s0">demo</td>

    <td class="s0">demo</td>

    <td class="s0">demo</td>

  </tr>

  <tr>

    <td class="s1">demo</td>

    <td class="s1">demo</td>

    <td class="s1">demo</td>

  </tr>

  <tr>

    <td class="s2">demo</td>

    <td class="s2">demo</td>

    <td class="s2">demo</td>

  </tr>

  <tr>

    <td>demo</td>

    <td>demo</td>

    <td>demo</td>

  </tr>

</table>

 

2.插入控制单元格边框的JavaScript 脚本代码。 

 

<script>

var tempclass 

function cell_hover(){

    if(event.srcElement.tagName=="TD"){       

       tempclass=event.srcElement.className   

       event.srcElement.className="border1"   

    }

}

function cell_out(){

    if(event.srcElement.tagName=="TD")     

       event.srcElement.className=tempclass

}

</script>

 

3.在表格上加上事件并触发相应的函数。完整代码：

 

<style>

td{font:normal 10px Tahoma;text-align:center}

.s0{color:red}

.s1{color:green}

.s2{color:blue}

.border1{border:1px solid #666666;background:#DEDEDE;color:#333333}

</style>

<script>

var tempclass //临时变量，保存鼠标移上前当前单元格的的className名

function cell_hover(){

//用event.srcElement取得事件发生的对象，

//判断仅当事件发生的当前对象为单元格TD时执行下两行代码

    if(event.srcElement.tagName=="TD"){       

//保存鼠标移上前当前单元格的className名到临时变量tempclass

       tempclass=event.srcElement.className   

//当前单元格的className变为border1

       event.srcElement.className="border1"   

    }

}

function cell_out(){

//判断仅当事件发生的当前对象为单元格TD时执行下一行代码

    if(event.srcElement.tagName=="TD")     

       event.srcElement.className=tempclass//恢复单元格的className

}

</script>

<table width="310" height="50" border="1" cellpadding="0" cellspacing="0" bordercolor="#eeeeee" bgColor="#eeeeee" onmouseover="cell_hover()" onmouseout="cell_out()">

  <tr>

    <td class="s0">demo</td>

    <td class="s0">demo</td>

    <td class="s0">demo</td>

  </tr>

  <tr>

    <td class="s1">demo</td>

    <td class="s1">demo</td>

    <td class="s1">demo</td>

  </tr>

  <tr>

    <td class="s2">demo</td>

    <td class="s2">demo</td>

    <td class="s2">demo</td>

  </tr>

  <tr>

    <td>demo</td>

    <td>demo</td>

    <td>demo</td>

  </tr>

</table>

 

 注意：表格的边框必须大于等于1，边框颜色必须跟背景颜色一致。

 提示：如果此效果仅用于某些单元格，可把TABLE标签里的

 onmouseover="cell_hover()" onmouseout="cell_out()" 

 

删掉，然后在相应的单元格标签中加上，脚本代码中判断事件发生对象的代码也可以删掉。

特别提示

代码运行后的效果如图 1.2.32、图1.2.33所示。

 

图 1.2.32 各单元格的初始状态

 

图 1.2.33 鼠标移上时单元格的边框变化

特别说明

 

本例主要通过用event对象的srcElement属性取得触发鼠标事件的对，然后用对象的 tagName属性获取对象标签，判断是否为单元格，是则用对象的className属性设置对象的CSS类。

srcElement 设置或获取触发事件的对象。

tagname 获取对象的标签名称。

className 设置或获取对象的CSS类。