Sugo

          Goof off ? no way: never
          posts - 20, comments - 8, trackbacks - 73, articles - 1
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          html表格表頭隨著鼠標上下移動

          Posted on 2007-01-24 18:53 sugo 閱讀(1514) 評論(0)  編輯  收藏

          ????? 報表中有這個需求,當報表很大需要下拉時,但表頭在正上方,看不到對應的是哪一項的數據。此功能可以使用虛擬一個表頭來實現。具體的靈感來自網站隨著鼠標移動的圖片。當鼠標下移時,圖片跟著走。對于這個需求來說只需把圖片換成一個表格即可。
          ?????? 網頁中加入如下代碼:
          ??????<DIV id="thead" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-500); TEXT-ALIGN: center">
          <TABLE cellSpacing=0 cellPadding=0 align=center border=0>
          <TBODY>
          <TR>
          <TD>
          <EMBED style="LEFT: -73px; POSITION: absolute; TOP: 125px" align=right>
          <table bgcolor="red"? border=1>
          <tr>
          <td>sdfsd</td><td>sdfsd</td><td>sdfsd</td>
          </tr>
          </table>
          </EMBED>
          </TD>
          </TR>
          </TBODY>
          </TABLE>
          </DIV>
          ?????? 紅色代碼部分可以更替為任意html標記,比如img、input等等。
          ?????? 注:內嵌的表格顏色最好深一些,不然會出現重疊現象。調整虛擬表頭相對屏幕上方的位置在藍色粗體的地方,可根據需要修改。
          ?????? 當需要打印報表時,可以添加一個button來控制這個表頭的顯示 js方法為
          ?????? function control(){?
          ???????? var temp=document.getElementById("thead");
          ????????? if(temp.style.display=='none')
          ????????????? temp.style.display='' ;
          ????????? else
          ????????????? temp.style.display='none';
          ?????? }


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 五河县| 垣曲县| 通道| 安龙县| 成安县| 开鲁县| 大丰市| 荆州市| 拉萨市| 秦安县| 老河口市| 清远市| 大田县| 新民市| 昭苏县| 阳新县| 买车| 河南省| 久治县| 湘潭县| 石台县| 宁强县| 景德镇市| 个旧市| 巴彦淖尔市| 印江| 当涂县| 张家界市| 陇南市| 通渭县| 海兴县| 彰武县| 伊川县| 谷城县| 宁都县| 安达市| 如东县| 土默特右旗| 阿鲁科尔沁旗| 双城市| 灵武市|