關於JS、JQ首行首列固定展現

   當時碰見這個問題 是醫院手麻系統大批量數據展現，因爲是舊項目系統沒有使用到前端的架構 只能使用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>