您的位置:首页 > 编程语言

无插件固定表头代码

2016-02-01 19:43 239 查看
先声明~我是小白,最近项目有提出要求,要做个固定表头的小功能, 网上一搜好多插件,看看插件也不是很大,后来就想着自己做了html格式如下

<table>
  <thead>
<tr>
<th>任务名 </th>
<th>引用名</th>

<th>教练名</th>
<th>目标</th>
<th>视频</th>
<th>总天数/周数</th>

<th>状态</th>
<th>操作</th>
</tr>
  </thead>
<!--内容部分就先写一行吧-->

<tr>

<td>11111111111111</dt>

<td>11111111111111</dt>

<td>11111111111111</dt>

<td>11111111111111</dt>

<td>11111111111111</dt>

<td>11111111111111</dt>

</tr>
           </table>

<!--这里要引入js文件-->

<script>

//既然是固定表头嘛,那肯定要用到position:fixed

$("tr").eq(0).css('position',"fixed").css("top",'0px');

 //这里是把每一个th的宽度存入到thWidth这个数组中

var thWidth=new Array();
 var thLonger=$("th").length  
for(var i=0;i<thLonger;i++){
thWidth[i]=$("th").eq(i).width() 
}
console.log(thWidth)

//这里把第二个tr中所有td的宽度存入到tdWidth中

 var tdWidth=new Array();
var  tdLonger=$("tr").eq(1).children("td").length
 
for(var i=0;i<tdLonger;i++){
tdWidth[i]=$("tr").eq(1).children("td").eq(i).width()
}  
console.log(tdWidth)

//表格都是自适应的,所以th=tr的宽度就可以了

thWidth=tdWidth

//然后给th赋值就可以了

   for(var i=0;i<thLonger;i++){
   $("th").eq(i).width(tdWidth[i])  
}

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: