每日一得

          不求多得,只求一得 about java,hibernate,spring,design,database,Ror,ruby,快速開發
          最近關心的內容:SSH,seam,flex,敏捷,TDD
          本站的官方站點是:顛覆軟件

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            220 隨筆 :: 9 文章 :: 421 評論 :: 0 Trackbacks
          key words: css? 隔行換色 控制表格  交替顏色

          最近用到不少css的東西,發現用css是可以省不少麻煩,特別更改效果。

          google了一篇 利用CSS控制表格的交替顏色

          下面是實現的代碼:

          <style?type="text/css">
          <!--
          tr?
          {background-color:expression((this.sectionRowIndex==0)?"":
          (this.sectionRowIndex%2==0)?"red":"blue")
          }
          -->
          </style>
          </HEAD>
          <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>

          關鍵就是這一句:
          tr?{background-color:expression((this.sectionRowIndex==0)?"":
          (this.sectionRowIndex%2==0)?"red":"blue")}


          對于td的控制如下:
          <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>
          </HEAD>
          <table>
          <tr><td>第1行</td><td>第1行</td><td>第1行<?/td><td>第1行</td><td>第1行</td></tr>
          <tr><td>第2行</td><td>第2行</td><td>第2行<?/td><td>第2行</td><td>第2行</td></tr>
          <tr><td>第3行</td><td>第3行</td><td>第3行<?/td><td>第3行</td><td>第3行</td></tr>
          <tr><td>第4行</td><td>第4行</td><td>第4行<?/td><td>第4行</td><td>第4行</td></tr>
          <tr><td>第5行</td><td>第5行</td><td>第5行<?/td><td>第5行</td><td>第5行</td></tr>
          </table>

          cellIndex 

          另:和數組一樣,第一行從0開始



          但愿對你有用.? :)



          posted on 2006-06-15 18:14 Alex 閱讀(2993) 評論(2)  編輯  收藏 所屬分類: web技術

          評論

          # re: 利用css實現表格的隔行換色 2006-06-15 18:19 晴天娃娃
          哈哈  回復  更多評論
            

          # re: 利用css實現表格的隔行換色 2006-06-15 19:09 Andy luo
          這種css里嵌js的方式在別的瀏覽器里不支持吧。  回復  更多評論
            

          主站蜘蛛池模板: 静宁县| 祁阳县| 江北区| 石嘴山市| 建昌县| 新竹县| 东兴市| 台北县| 寿宁县| 临城县| 张家界市| 泰顺县| 迁安市| 嫩江县| 资溪县| 原平市| 平潭县| 沾化县| 垦利县| 闽侯县| 连平县| 清水县| 玉田县| 江阴市| 霍邱县| 津南区| 南京市| 万宁市| 昆明市| 夏邑县| 古田县| 太白县| 益阳市| 昌黎县| 长垣县| 吉隆县| 萍乡市| 漳平市| 炉霍县| 清徐县| 石狮市|