转,帅气的表格隔行换色+鼠标经过变色、点击变色
源碼是:
<style type=”text/css”><!–
#senfe {
width: 650px;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
}
#senfe td {
padding: 5px;border-right: #E3E3E3 1px solid;
border-bottom: #E3E3E3 1px solid;
}
#senfe2 {
width: 650px;
border-top: #E3E3E3 1px solid;
border-left: #E3E3E3 1px solid;
}
#senfe2 td {
padding: 5px;border-right: #E3E3E3 1px solid;
border-bottom: #E3E3E3 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].οnclick=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].οnmοuseοver=function(){
if(this.x!=”1″)this.style.backgroundColor=c;
}
t[i].οnmοuseοut=function(){
if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
–></script>
<P><TABLE id=”senfe” cellSpacing=0 cellPadding=0 width=”650px” border=0>
<TBODY>
<TR>
<TD colSpan=7><H3 id=about2>電子雜志制作價(jià)格表</H3></TD></TR>
<TR>
<TD width=”12%”>版 本</TD>
<TD width=”12%”>簡(jiǎn)易版</TD>
<TD width=”13%”>普及版</TD>
<TD width=”13%”>標(biāo)準(zhǔn)版</TD>
<TD width=”14%”>專業(yè)版</TD>
<TD width=”15%”>創(chuàng)意版</TD>
<TD width=”15%”>經(jīng)典版</TD>
</TR>
<TR>
<TD>制作周期</TD>
<TD>5天以內(nèi)</TD>
<TD>10天以內(nèi)</TD>
<TD>10天-15天</TD>
<TD>30天-45天</TD>
<TD>與客戶另行協(xié)商</TD>
<TD>與客戶另行協(xié)商</TD>
</TR>
<TR>
<TD colspan=”7″>??? <p style=”color:red”>如果客戶長(zhǎng)期期刊制作合作,價(jià)格將更加優(yōu)惠。</p></TD>
</TR>
</TBODY></TABLE>
<TABLE id=”senfe2″ cellSpacing=0 cellPadding=0 width=”650px”
border=0>
<TBODY>
<TR>
<TD colSpan=3><H3 id=about2>電子雜志制作單項(xiàng)價(jià)格表</H3></TD></TR>
<TR>
<TD width=”12%”>單項(xiàng)項(xiàng)目</TD>
<TD width=”26%”>單價(jià)</TD>
<TD width=”46%”>備注</TD>
</TR>
<TR>
<TD>專業(yè)配音</TD>
<TD>面議</TD>
<TD>專業(yè)錄音棚+專業(yè)錄音員,看配音內(nèi)容多少而定</TD>
</TR>
<TR>
<TD>專業(yè)拍攝</TD>
<TD>面議</TD>
<TD>專業(yè)攝影看客戶需求而定</TD>
</TR>
</TBODY>
</TABLE>
</P>
</LI>
</UL>
</DIV></DIV></DIV>
<script language=”javascript”><!–
//senfe(“表格名稱”,”奇數(shù)行背景”,”偶數(shù)行背景”,”鼠標(biāo)經(jīng)過背景”,”點(diǎn)擊后背景”);
senfe(“senfe”,”#fff”,”#F5F5F5″,”#FFFFCC”,”#FFFF84″);
//senfe(“表格名稱”,”奇數(shù)行背景”,”偶數(shù)行背景”,”鼠標(biāo)經(jīng)過背景”,”點(diǎn)擊后背景”);
senfe(“senfe2″,”#fff”,”#F5F5F5″,”#FFFFCC”,”#FFFF84″);
–></script>
?
轉(zhuǎn)自(http://yanglu.org/table_css_color/)
轉(zhuǎn)載于:https://www.cnblogs.com/webhotel/archive/2010/07/28/1786592.html
總結(jié)
以上是生活随笔為你收集整理的转,帅气的表格隔行换色+鼠标经过变色、点击变色的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 打印竖排的文字
- 下一篇: SQL Server 数据库的整理优化的