求表格文字交替显示时淡进淡出效果

Question

我有如下表格，共4行数据，想让它们交替显示，第一次显1，3行的内容，第二次显示2，4行的内容，在交替时我想它们的文字效果为淡进淡出。请问各位如何实现，谢谢 
<table id="main_table"> 
<tr> 
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
</table>

Answer 1

<style>
    tr{
  bgcolor:expression(this.bgColor=((this.rowIndex)%2==0 )? 'gray' : '#ffffcc');
  }
</style>
<SCRIPT language=JavaScript>
<!--
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}// Flash Image Extension for Dreamwever ,by Yichun Yuan([email protected])
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
//-->
</SCRIPT>
<table id="main_table">
<tr>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
</tr>
<tr>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
</tr>
<tr>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
</tr>
<tr>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
<td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
</tr>
</table>
    

Answer 2

<style>
tr{background:#CCC}
</style>
<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script>
var n = 0;
function doit(){
if(n==1 ){
$("#main_table tr:nth-child(even) td").fadeOut("fast",function(){
    $("#main_table tr:nth-child(odd) td").fadeIn("fast");
});
}
else{
$("#main_table tr:nth-child(odd) td").fadeOut("fast",function(){
  $("#main_table tr:nth-child(even) td").fadeIn("fast");
});
}
n++;
n = n % 2;
}window.onload=function(){
  $("#main_table tr:nth-child(even)").fadeIn(0);
  setInterval("doit()", 2000);
}
</script>
<table id="main_table"> 
<tr> 
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">aa </td> 
<td width="100">bb </td> 
</tr> 
<tr>
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">aa </td> 
<td width="100">bb </td> 
</tr> 
</table>

Answer 3

改一下:<style>
tr{background:#CCC}
</style>
<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script>
var n = 0;
function doit(){
if(n==1 ){
$("#main_table tr:nth-child(even) td").fadeOut("fast",function(){
    $("#main_table tr:nth-child(odd) td").fadeIn("fast");
});
}
else{
$("#main_table tr:nth-child(odd) td").fadeOut("fast",function(){
  $("#main_table tr:nth-child(even) td").fadeIn("fast");
});
}
n++;
n = n % 2;
}window.onload=function(){
  $("#main_table tr:nth-child(even) td").fadeOut(0);
  setInterval("doit()", 2000);
}
</script>
<table id="main_table"> 
<tr> 
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">aa </td> 
<td width="100">bb </td> 
</tr> 
<tr>
<td width="100">a </td> 
<td width="100">b </td> 
</tr> 
<tr> 
<td width="100">aa </td> 
<td width="100">bb </td> 
</tr> 
</table>

Answer 4

看错需求.交替出现是<style>
    tr{
        bgcolor:expression(this.bgColor=((this.rowIndex)%2==0 )? '#66ccff' : '#ccccff');
    }
</style>
<SCRIPT language=JavaScript>
    <!--
    nereidFadeObjects = new Object();
    nereidFadeTimers = new Object();
    function nereidFade(object, destOp, rate, delta){
        if (!document.all)
            return
        if (object != "[object]"){  //do this so I can take a string too
            setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
            return;
        }
        clearTimeout(nereidFadeTimers[object.sourceIndex]);
        diff = destOp-object.filters.alpha.opacity;
        direction = 1;
        if (object.filters.alpha.opacity > destOp){
            direction = -1;
        }
        delta=Math.min(direction*diff,delta);
        object.filters.alpha.opacity+=direction*delta;
        if (object.filters.alpha.opacity != destOp){
            nereidFadeObjects[object.sourceIndex]=object;
            nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
        }
    }    // Flash Image Extension for Dreamwever ,by Yichun Yuan([email protected])
    nereidFadeObjects = new Object();
    nereidFadeTimers = new Object();
    function nereidFade(object, destOp, rate, delta){
        if (!document.all)
            return
        if (object != "[object]"){  //do this so I can take a string too
            setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
            return;
        }
        clearTimeout(nereidFadeTimers[object.sourceIndex]);
        diff = destOp-object.filters.alpha.opacity;
        direction = 1;
        if (object.filters.alpha.opacity > destOp){
            direction = -1;
        }
        delta=Math.min(direction*diff,delta);
        object.filters.alpha.opacity+=direction*delta;
        if (object.filters.alpha.opacity != destOp){
            nereidFadeObjects[object.sourceIndex]=object;
            nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
        }
    }    function changeto(highlightcolor){
        source=event.srcElement
        if (source.tagName=="TR"||source.tagName=="TABLE")
            return
        while(source.tagName!="TD")
            source=source.parentElement
        if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
            source.style.backgroundColor=highlightcolor
    }
    function changeback(originalcolor){
        if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
            return
        if (event.toElement!=source)
            source.style.backgroundColor=originalcolor
    }    window.onload=function(){
        var tb = document.getElementById("main_table");
        for(var i=0;i<tb.rows.length;i++){
            if(i%2==0){
                tb.rows[i].style.visibility="hidden";
            }
        }
        //showInCafe()
        TIMER= setTimeout(showInCafe,3000);
    }
    var showFlag=1;
    var TIMER;
    function showInCafe(){
        var tb = document.getElementById("main_table");
      
        if(showFlag==1){
            for(var i=0;i<tb.rows.length;i++){
                if(i%2==0){
                    tb.rows[i].style.visibility="visible";
                    for(var j=0;j<tb.rows[i].cells.length;j++){
                        nereidFade(tb.rows[i].cells[j],100,300,5)
                    }
                }else{
                    tb.rows[i].style.visibility="hidden";
                }
            }
        }else{
            for(var i=0;i<tb.rows.length;i++){
                if(i%2==0){
                    tb.rows[i].style.visibility="hidden";
                    for(var j=0;j<tb.rows[i].cells.length;j++){
                        nereidFade(tb.rows[i].cells[j],60,300,5)
                    }
                }else{
                    tb.rows[i].style.visibility="visible";
                }
            }
        }
        showFlag=-showFlag;
        TIMER= setTimeout(showInCafe,3000);
    }
    //-->
</SCRIPT>
<table id="main_table">
    <tr>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
    </tr>
    <tr>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
    </tr>
    <tr>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
    </tr>
    <tr>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">a </td>
        <td width="100" onmouseout="nereidFade(this,60,10,5)" onmouseover="nereidFade(this,100,10,5)" style="FILTER: alpha(opacity=50)">b </td>
    </tr>
</table>