當時遇見這個問題 是醫院手麻系統大批量數據展示，由於是舊項目系統沒有使用到前端的架構 只能使用JQ,JS, css完成 也謝謝給予我支持的同行們 固定首行數據： 採用函數的方式進行 JQ /** * 功能：固定表頭 * 參數 viewid 表格的id * scrollid 滾動條所在容器的id * ...
當時遇見這個問題 是醫院手麻系統大批量數據展示，由於是舊項目系統沒有使用到前端的架構 只能使用JQ,JS, css完成 也謝謝給予我支持的同行們
固定首行數據： 採用函數的方式進行 JQ
/**
* 功能：固定表頭
* 參數 viewid 表格的id
* scrollid 滾動條所在容器的id
* size 表頭的行數（複雜表頭可能不止一行）
*/
function scroll(viewid, scrollid, size) {
// 獲取滾動條容器
var container = document.getElementById(scrollid);
// 將表格拷貝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 獲取表格的行數
var len = tb2.rows.length;
// 將拷貝得到的表格中非表頭行刪除
for (var i = tb2.rows.length; i > size; i--) {
// 每次刪除數據行的第一行
tb2.deleteRow(size);
}
// 創建一個div
var bak = document.createElement("div");
// 將div添加到滾動條容器中
container.appendChild(bak);
// 將拷貝得到的表格在刪除數據行後添加到創建的div中
bak.appendChild(tb2);
// 設置創建的div的position屬性為absolute，即絕對定於滾動條容器（滾動條容器的position屬性必須為relative）
bak.style.position = "absolute";
// 設置創建的div的背景色與原表頭的背景色相同（貌似不是必須）
bak.style.backgroundColor = "#cfc";
// 設置div的display屬性為block，即顯示div（貌似也不是必須，但如果你不希望總是顯示拷貝得來的表頭，這個屬性還是有用處的）
bak.style.display = "block";
// 設置創建的div的left屬性為0，即該div與滾動條容器緊貼
bak.style.left = 0;
// 設置div的top屬性為0，初期時滾動條位置為0，此屬性與left屬性協作達到遮蓋原表頭
bak.style.top = "0px";
bak.style.width = "100%";
// 給滾動條容器綁定滾動條滾動事件，在滾動條滾動事件發生時，調整拷貝得來的表頭的top值，保持其在可視範圍內，且在滾動條容器的頂端
container.onscroll = function () {
// 設置div的top值為滾動條距離滾動條容器頂部的距離值
bak.style.top = this.scrollTop + "px";
}
}
// 在頁面載入完成後調用該方法
window.onload = function () {
scroll("recordDetail", "tableDiv", 1);
}
數據格式展示：
<div id="tableDiv" style="overflow-x:auto;" class="wrapper">
<table id='recordDetail' class="researh" style="border-collapse: collapse; table-layout: fixed; clear: both; cursor: pointer;">
<tr id="DetailTh" class="FixedTitleRow" style="width:100%;"></tr>
<tr id="DatailList" style="width:100%;" ></tr>
</table>
首列固定展示： CSS樣式進行
<script type="text/javascript">
$("#tableDiv").scroll(function () {//給table外面的div滾動事件綁定一個函數
var left = $("#tableDiv").scrollLeft();//獲取滾動的距離
var trs = $("#tableDiv table tr");//獲取表格的所有tr
trs.each(function (i) {//對每一個tr（每一行）進行處理
//獲得每一行下麵的所有的td，然後選中下標為0的，即第一列，設置position為相對定位
//相對於父div左邊的距離為滑動的距離，然後設置個背景顏色，覆蓋住後面幾列數據滑動到第一列下麵的情況
//如果有必要也可以設置一個z-index屬性
$(this).children().eq(0).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white" });
});
});
</script>
