Heim >Web-Frontend >HTML-Tutorial >Rufen Sie den Implementierungscode für die Tabelle (fester Header) dynamisch ab
Rufen Sie den Implementierungscode für die Tabelle (fester Header) dynamisch ab
- 高洛峰Original
- 2017-03-15 09:18:291497Durchsuche
In diesem Artikel wird der Implementierungscode zum dynamischen Abrufen der Tabelle (fester Header)
<!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> vorgestelltDas obige ist der detaillierte Inhalt vonRufen Sie den Implementierungscode für die Tabelle (fester Header) dynamisch ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn