PIXNET Logo登入

英傑銳網路數位設計

跳到主文

(02)2713-1769 RWD自適應網頁設計,台北市RWD網頁設計,台北網頁設計,網站架設 https://www.injerry.com/

部落格全站分類:視覺設計

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 4月 26 週一 201012:00
  • 超簡單表格隔行換色+鼠標經過變色

w2008101635546.gif
超簡單表格隔行換色+鼠標經過變色(ie6,ie7,ff)
  
 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<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>

(繼續閱讀...)
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(1,547)

  • 個人分類:JavaScript
▲top
  • 4月 26 週一 201009:09
  • 五行搞定CheckBox全選或全不選

如何做到CheckBox的「全選/取消全選」的功能
筆者有在網路上搜尋到一篇不錯的文章如下
文章中有詳細介紹如何實作此功能
http://www.wowbox.com.tw/blog/article.asp?id=2923
(繼續閱讀...)
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(1) 人氣(30,110)

  • 個人分類:JavaScript
▲top
1

最新文章

  • 【RWD響應式教學】- Facebook fb-like-box Plugin符合RWD響應式網頁
  • 【CSS教學】- 簡單CSS語法美化Table表格底色奇數偶數相間
  • 【市場趨勢】從iPhone6看RWD響應式網站的重要性
  • Font Awesome 一行語法,輕鬆在網頁加入ICON圖示
  • Responsive Web Design 響應式網站的實用工具
  • 國外RWD | Responsive Web Design 欣賞網站
  • RWD(Responsive Web Design)自適應網站的製作方式
  • RWD (Responsive Web Design) 自適應網站的簡單介紹
  • 【HTML教學】- 如何使用HTML語法,在手機版網站上撥打電話或簡訊的超鏈結
  • 【HTML教學】X-UA-Compatible設置IE兼容模式

熱門文章

  • (30,110)五行搞定CheckBox全選或全不選
  • (513)18個UI原稿圖(包括twitter手稿)
  • (27,829)[Html]圖片型表單按鈕Button
  • (16,563)Apache設定限制目錄瀏覽的方法
  • (36,611)[CSS教學] - 如何使用CSS設計細框線Table表格
  • (13,913)[jQuery教學] - jQuery強大的圖表套件 Highcharts
  • (9,752)[CSS教學] - CSS背景漸層顏色語法產生器 (Ultimate CSS Gradient Generator)
  • (14,662)[CSS教學] - CSS表單美化
  • (75,506)[CSS教學] - 純CSS二、三階層動態選單按鈕 (完美支援各版本瀏覽器)
  • (20,061)[CSS教學] - CSS基礎您不能不知道的block(塊元素)、inline(內聯元素)差別

文章分類

  • 網頁設計作品 (16)
  • JavaScript (2)
  • Html (6)
  • Flash (2)
  • jQuery (5)
  • PHP (4)
  • CSS (22)
  • 資訊文章 (14)
  • 攝影資訊 (1)
  • 網路行銷 (2)
  • 未分類文章 (1)

誰來我家

參觀人氣

  • 本日人氣:
  • 累積人氣: