第一种: 式代
码如下:
<頭>
.tablestyle{
背景色:#CCCCCC;ボーダー:#ff0000 実線 2px;ボーダー折りたたみ:折りたたみ; カーソル:手; 幅:100%;
}
.tablestyle td{ border:#ff0000 ソリッド 2px;ボーダー折りたたみ:折りたたみ;}
.tablestyle tr{
onmouseover:expression(onmouseover=function()
{
this.style.color='赤';
this.style.backgroundColor='黄色'
});
onmouseout:expression(onmouseout=function()
{
this.style.col
this.style.backgroundColor=''
}
);
}
11111111111 | 22222222222 |
33333333333 | 44444444 |
55555 | 66666666 |
77777777777 | 8888888888 |
第1行 | 第1列 |
第2行 | 第2列 |
第 3 行 | 第 3 列 |
第 4 行 | 第 4 列 | 第5行 | 第5列 |
-------------------- -----------
每个单元格变色:
第1行 | 第1列 |
第2行 | 第2列 |
第3行 | 第3列 |
第4列 | |
第5行 | 第5列 |
------------------------
以上都用到式,实现变得很方便,但是,经测试,在IE6(其它バージョン本)我不知道)上很正常,Firefox 上何反应…… ,要想 Firefox 上にも此効果,就要用第二方法
(2)JS
マウス标滑过变色:
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=テーブル名.getElementsByTagName("tr");
for (var i=0;i<=li.length;i++){
li[i].style.backgroundColor="#FFB584";
li[i].onmouseover=function(){
this.style.backgroundColor="#FFFFFF";
}
li[i].onmouseout=function(){
this.style.backgroundColor="#FFB584"
}
}
}
第1行 | 第 1 列 |
第 2 行 | 第 2 列 |
第 3 行 | 第3列 |
第4行 | 第4列 |
第5行 | 第5列 |
------------------------
隔行变色:
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=テーブル名.getElementsByTagName("tr");
for (var i=0;i<=li.length;i++){
if (i%2==0){
li[i].style.backgroundColor="#FFB584";
}else li[i].style.backgroundColor="#FFFFFF";
}
}
第1行 | 第1列 |
第2行 | 第2列 |
第3行 | 第3列 |
第 4 行 | 第 4 列 |
第 5 行 | 第 5 列 |