欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)兩個(gè)Table固定表頭根據(jù)頁(yè)面大小自行調(diào)整

 更新時(shí)間：2014年01月03日 15:32:58   作者：  
正如標(biāo)題所言?xún)蓚€(gè)Table固定表頭，可根據(jù)頁(yè)面大小自行調(diào)整使用JavaScript實(shí)現(xiàn)，具體的示例如下，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
/**
* @param oTarget 需要加載scroll的dom對(duì)象
* @param fnHandler 處理的回調(diào)函數(shù)
*/
function eventHandler(oTarget, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener("scroll", fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("onscroll", fnHandler);
} else {
oTarget["onscroll"] = fnHandler;
}
};

function oo(divContentID, divHeaderID) {
var div = document.getElementById(divContentID);
var left = div.scrollLeft;
var divHeader = document.getElementById(divHeaderID);
divHeader.scrollLeft = left;


var disWidth = div.children[0].style.width.replace("px", "")
- div.style.width.replace("px", "");
if (div.scrollLeft >= disWidth) {
divHeader.style.overflowY = 'scroll';
} else {
divHeader.style.overflowY = 'hidden';
}
}

window.onload = function onStartLock() {
var oDiv = document.getElementById("divContentID");
eventHandler(oDiv, function() {
oo("divContentID", "divHeaderID");
});
};
</script>
</head>
<body>
<div id="div1All"
style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px">
<div id="divHeaderID"
style="margin-right: auto; margin-left: auto; overflow: hidden;">
<table border="1" cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">
<Tr style="background: navy; color: white; height: 30px">
<Th width="100px">Header A</Th>
<Th width="100px">Header B</Th>
<Th width="100px">Header C</Th>
<Th width="100px">Header D</Th>
<Th width="100px">Header E</Th>
<Th width="100px">Header F</Th>
</Tr>
</table>
</div>
<div id="divContentID"
style="position: absolute; left: 0px; top: 30.5px; bottom: 0px; right: 0px; overflow: scroll">
<table border="1" cellspacing="0"
style="BORDER-COLLAPSE: collapse; font-size: 15px"
borderColor="#c1dad7" cellPadding="0" bgcolor="#f5fffa"
width="600px">
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
<Tr>
<Td width="100px">A</Td>
<Td width="100px">B</Td>
<Td width="100px">C</Td>
<Td width="100px">D</Td>
<Td width="100px">E</Td>
<Td width="100px">F</Td>
</Tr>
</table>
</div>
</div>
</body>
</html>

相關(guān)文章

  • JavaScript Promise啟示錄

    JavaScript Promise啟示錄

    近幾年隨著JavaScript開(kāi)發(fā)模式的逐漸成熟，CommonJS規(guī)范順勢(shì)而生，其中就包括提出了Promise規(guī)范，Promise完全改變了js異步編程的寫(xiě)法，讓異步編程變得十分的易于理解
    2014-08-08
  • JS中用try catch對(duì)代碼運(yùn)行的性能影響分析

    JS中用try catch對(duì)代碼運(yùn)行的性能影響分析

    要捕獲JavaScript代碼中的異常一般會(huì)采用 try catch，不過(guò)try catch的使用是否是對(duì)代碼性能產(chǎn)生影響呢？答案是肯定有的，但是有多少不得而知。下面這篇文章就給大家詳細(xì)介紹了在JS中用try catch對(duì)代碼運(yùn)行的性能影響，有需要的朋友們可以參考借鑒。
    2016-12-12
  • 解決layui動(dòng)態(tài)加載復(fù)選框無(wú)法選中的問(wèn)題

    解決layui動(dòng)態(tài)加載復(fù)選框無(wú)法選中的問(wèn)題

    今天小編就為大家分享一篇解決layui動(dòng)態(tài)加載復(fù)選框無(wú)法選中的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • JavaScript 自定義屬性 data-*使用介紹

    JavaScript 自定義屬性 data-*使用介紹

    Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無(wú)關(guān)的信息,讀取的時(shí)候是通過(guò)dataset對(duì)象，使用”.”來(lái)獲取屬性，需要去掉data-前綴
    2023-06-06
  • 微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能示例

    微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能,結(jié)合實(shí)例形式分析了微信小程序添加聯(lián)系人的具體步驟,包括布局與邏輯實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2017-11-11
  • Array.prototype.concat不是通用方法反駁[譯]

    Array.prototype.concat不是通用方法反駁[譯]

    ECMAScript 5.1規(guī)范中指出,數(shù)組方法concat是通用的(generic).本文反駁了這一結(jié)論,因?yàn)閷?shí)際上并不是這樣的
    2012-09-09
  • javascript結(jié)合Cookies實(shí)現(xiàn)瀏覽記錄歷史

    javascript結(jié)合Cookies實(shí)現(xiàn)瀏覽記錄歷史

    最近在工作當(dāng)中遇到一個(gè)問(wèn)題 有個(gè)頁(yè)面需要添加一個(gè)瀏覽歷史記錄功能，具體來(lái)說(shuō)就是要記錄下用戶(hù)在此網(wǎng)站的點(diǎn)擊歷史 并把它們降序排列出來(lái)（只顯示前6個(gè)瀏覽歷史而且不能重復(fù)）。
    2008-09-09
  • 奇偶行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類(lèi)

    奇偶行高亮顯示及鼠標(biāo)劃過(guò)高亮顯示類(lèi)

    奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過(guò)高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒(méi)有一個(gè)封裝成類(lèi)直接用的.想象自己當(dāng)初谷歌這個(gè)類(lèi)時(shí),還真沒(méi)少折騰時(shí)間.
    2010-07-07
  • JavaScript獲取表單enctype屬性的方法

    JavaScript獲取表單enctype屬性的方法

    這篇文章主要介紹了JavaScript獲取表單enctype屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-04-04
  • js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式

    js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式

    這篇文章主要介紹js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)重定向的幾種方式,需要的朋友可以參考下
    2014-05-05

最新評(píng)論