码迷,mamicode.com
首页 > 其他好文 > 详细

实现表格固定列

时间:2020-03-30 14:34:45      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:on()   auto   idt   func   相对   query   事件   cti   jquer   

<html>
<head>
<title>表格的冻结列实现</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!--如果冻结列不好使,给tableDiv也设置一个position:relative;-->
<div id="tableDiv" style="width:500px;overflow-x:auto;">
<table style="width:720px;">
<tr>
<td style="width:100px;">迭代名称</td>
<td style="width:80px;">得分</td>
<td style="width:100px;">代码覆盖率</td>
<td style="width:120px;">新需求个数</td>
<td style="width:160px;">通过的需求个数</td>
<td style="width:160px;">未通过的需求个数</td>
</tr>
<tr>
<td>迭代一</td>
<td>45</td>
<td>56%</td>
<td>450</td>
<td>12</td>
<td>90</td>
</tr>
<tr>
<td>迭代五</td>
<td>36</td>
<td>78%</td>
<td>216</td>
<td>97</td>
<td>12</td>
</tr>
<tr>
<td>迭代三</td>
<td>37</td>
<td>91%</td>
<td>404</td>
<td>17</td>
<td>34</td>
</tr>
</table>
</div>
<script>
$("#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":"red"});
$(this).children().eq(1).css({"position":"relative","top":"0px","left":left,"background-color":"red"});
});
});
</script>
</body>
</html>

实现表格固定列

标签:on()   auto   idt   func   相对   query   事件   cti   jquer   

原文地址:https://www.cnblogs.com/yuwenjing0727/p/12598373.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!