无插件固定表头代码
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>
<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>
相关文章推荐
- 关于C语言里getchar和scanf的思考
- python 写文件刷新缓存
- 本地方法(JNI)——访问域+字符串参数
- C#成神之路<4> C#第一次程序编写
- JAVA环境变量配置
- python Popen卡死问题
- Django REST framework的各种技巧【目录索引】
- PYTHON之路(三)
- Django REST framework的各种技巧——6.异常处理
- Django REST framework的各种技巧——7.导入导出
- Django REST framework的各种技巧——5.搜索
- Django REST framework的各种技巧——3.权限
- Django REST framework的各种技巧——4.Generic View
- spring(基础11) Spring 工具类AntPathMatcher
- Django REST framework的各种技巧——2.serializer
- Django REST framework的各种技巧——1.基础讲解
- C++11中initializer_list的用法
- QtSoap调用Web Service(QtSoap是非官方应用)
- 【慕课笔记】U2 封装 第5节 什么是JAVA中的内部类
- JAVA的Random类(转)