关于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>