簡單的css js控制table隔行變色

時間  2019-11-11
標籤 簡單 css 控制 table 隔行 變色 欄目 CSS 简体版
原文   原文鏈接

（1）用expressionjavascript

鼠標滑過變色：css

<style type="text/css">
<!-- 
table { background-color:#000000; cursor:hand; width:100%; }
td {

onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'}); 

onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}html

-->
</style>java

<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>web

－－－－－－－－－－－－－－－－－－－－－－－－－－－－express

簡單的隔行變色：測試

<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
</style>this

<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>spa

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－firefox

每一個單元格變色：

<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>

<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都用到expression，實現變得很方便，可是，經測試，在IE6（其它版本我不知道）上很正常，在firefox上無任何反應…… ，要想在firefox上也有此效果，就要用第二種方法

（2）用JS

鼠標滑過變色：

<script language="javascript">
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=tablename.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"
}
}
}
</script>

<table id="mytable">
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－

隔行變色：

<script language="javascript">
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=tablename.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";
}
}
</script>

<table id="mytable">
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都要用到JS，還須要table有個id，能夠對指定的table操做，可是，假如遇到某人的firefox裝了NoScript的話……能夠無視了

－－－－－－－－－－－－－－－－－－－－－－－－

隔行變色的鼠標通過變色

 

<html>
<head>
<title>隔行變色的鼠標通過變色</title>
<style type="text/css" media="screen">
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}
.t2 {background-color:#eee;}
.t3 {background-color:#ccc;}
</style>
<script type="text/javascript">
var Ptr=document.getElementsByTagName("tr");
function recolor() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=recolor;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
</script>
</head>

<body>
<table width=400 align=center>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>

</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－－－

表格隔行換色+鼠標點擊變色

 

<html>
<head>
<title>表格隔行換色+鼠標點擊變色</title>
<style type="text/css"><!--
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//原本打算直接用背景色判斷，FF獲取到的背景是RGB值，很差判斷
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
<tr><td>　</td><td>　</td><td>　</td><td>　</td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名稱","奇數行背景","偶數行背景","鼠標通過背景","點擊後背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</body>
</html>

 

－－－－－－－－－－－－－－－－－－－－－－－－

鼠標放置後變色

 

<html >
<head>
<title> 鼠標放置後變色 </title>

<script type="text/javascript">
<!--
//分別是奇數行默認顏色,偶數行顏色,鼠標放上時奇偶行顏色
var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"];
//從前面iHead行開始變色，直到倒數iEnd行結束
function addTableListener(o,iHead,iEnd)
{
o.style.cursor = "normal";
iHead = iHead > o.rows.length?0:iHead;
iEnd = iEnd > o.rows.length?0:iEnd;
for (var i=iHead;i<o.rows.length-iEnd ;i++ )
{
o.rows[i].onmouseover = function(){setTrBgColor(this,true)}
o.rows[i].onmouseout = function(){setTrBgColor(this,false)}
}
}
function setTrBgColor(oTr,b)
{
oTr.rowIndex % 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];
}
window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);}
//-->
</script>
</head>

 

<body><table border="1" width="100%" id="tbColor"><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr><tr><td>11</td><td>11</td><td>11</td></tr></table>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程