<body>
<table border="1px">
<tr>
<th id="id_item1" οnmοuseοver="this.bgColor='green'" οnmοuseοut="this.bgColor=''">Menu Item1</th>
</tr>
<tr>
<th>Menu Item2</th>
</tr>
</table>
</body>
我们知道,仅变换某个单元格的背景颜色的话用就行了,而要变换一列的背景颜色就必须要取得当前单元格在行中的索引值,然后遍历表格的所有行,改变行中相应单元格的背景颜色。
具体步骤:
1.插入表格代码
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD")
return ;
if(event.type=="mouseover"
oColor="#dedede"
else oColor="#ffffff"
tb=td.parentElement.parentElement
for(var i=0;i<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD") //如果事件不是发生在单元格上,退出函数
return
if(event.type=="mouseover") //判断事件类型,决定单元格改变的颜色
oColor="#dedede"
else oColor="#ffffff"
tb=td.parentElement.parentElement //单元格的上两级对象为表格
//遍历表格的所有行,设置相应单元格的背景颜色
for(var i=0;i<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
<table width="200" height="30" border="1" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
技巧:可以多加一个循环,改变鼠标所在的行的所有单元格背景,脚本修改如下:
function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD")
return ;
if(event.type=="mouseover")
oColor="#dedede"
else oColor="#ffffff"
tr=td.parentElement
tb=tr.parentElement
for(var i=0;i<tr.cells.length;i++)
tr.cells[i].bgColor=oColor
for(var i=0;i<tb.rows.length;i++)
tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>
完整代码:
function cells_color(){
var oColor,td=event.srcElement
if(td.tagName!="TD") //如果事件不是发生在单元格上,退出函数
return
if(event.type=="mouseover") //判断事件类型,决定单元格改变的颜色
oColor="#dedede"
else oColor="#ffffff"
//依次捕获的对象为 td.tr.tbody.table.colgroup单元格的上两级对象为表格
cols=td.parentElement.parentElement.parentElement.children[0]
cols.children[td.cellIndex].style.backgroundColor=oColor
}
</script>
<table width="200" height="30" border="1" οnmοuseοver="cells_color()" οnmοuseοut="cells_color()">
<col><col><col>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td>demo</td>
</tr>
</table>
特别提示
因为方法二比方法一少了一个遍历,所以效果更高。代码运行后的效果如图 1.2.37所示。
特别说明
col 指定基于列的表格默认属性。
colgroup 指定表格中一列或一组列的默认属性。
parentElement 获取对象层次中的父对象。
children 获取作为对象直接后代的 DHTML 对象的集合。
backgroundColor 设置或获取对象的背景颜色。