<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>
實現表格固定列
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。