动态获取表格（固定表头）实现代码
程序员文章站
2022-05-16 21:31:29
...
这篇文章介绍动态获取表格（固定表头）实现代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p {
width: 600px;
height: 300px;
margin: 0 auto;
overflow: auto;
position: relative;
}
.tab2 {
opacity: 0;
position: absolute;
top: 0;
}
.tab1 td{
text-align: center;
}
</style>
</head>
<body>
<p>
<table border="1px" cellspacing="0px" class="tab1">
<thead class="th xh">
</thead>
<tbody class="td">
</tbody>
</table>
<table border="1px" cellspacing="0px" class="tab2">
<thead style="background: #fff" class="th">
<tr>
</tr>
</thead>
</table>
</p>
</body>
<script src="jquery.js"></script>
<script>
$('p').scroll(function (x) {
var $this = $(this),
viewH = $(this).height(),//可见高度
contentH = $(this).get(0).scrollHeight,//内容高度
scrollTop = $(this).scrollTop();//滚动高度
if (scrollTop > 0) {
$('.tab2').css({
"opacity": '1',
"Z-index": '100',
"top": scrollTop
})
} else if (scrollTop < 30) {
$('.tab2').css({
"opacity": '0'
})
}
});
Data();
function Data() {
var data = {
};
$.get(url, data, function (res) {
$('.th').html(res.ReportHeard)
if($('.tab1 tr th').length < 10){
$('.tab1').css('width','100%');
$('.tab2').css('width','100%');
}else{
var wd = $('.tab1 tr th').length * 120 + 'px'; // 通过后台返回的表头有多少列，如果少于10列表格100% 大于10则手动添加
$('.tab1').css('width',wd)
$('.tab2').css('width',wd)
}
var sjObj = JSON.parse(res.ContentList);
var test = '';
for (var key in sjObj) {
test += '<tr>'
$('.xh th').each(function () {
test += '<td>' + sjObj[key][$(this).attr('data')] + '</td>';
})
test += '</tr>'
}
$('.td').html(test);
// 循环tabl里的th 看看有多少个 把每个th的宽度赋值给tab2里的th
$('.tab1 thead th').each(function (i) {
console.log($('.tab1 thead th').eq(i).width());
$('.tab2 thead th').eq(i).width($('.tab1 thead th').eq(i).width())
})
})
}
</script>
</html>
以上就是动态获取表格（固定表头）实现代码的详细内容，更多请关注其它相关文章！
上一篇： 求：生活网站源码一套，能用的。解决方法
下一篇： PHP检测获取内存信息