gpt4 book ai didi

javascript - 网格和动态表的高度

转载 作者:行者123 更新时间:2023-12-01 15:15:31 24 4
gpt4 key购买 nike

我有一个使用 Javascript/jQuery 动态创建的表。其逻辑如下图所示:

$.each(input, function (key, value){

let parent = $('<tr>');
let container = $('<td>').text('Test');
parent.append(container);
table.append(parent);

});
在我开始动态创建表格之前,当表格高度变得太大时,我可以让页眉和页脚保持在 View 中,同时让表格滚动。我用以下方法做到了这一点:
//HTML
<body>
<div id="wrapper">

<div id="header"></div>
<table id="content"></table>
<div id="footer"></div>

</div>
</body>

//CSS
body {
margin: 0;
height: 100%;
}

#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 56px 1fr 100px;
}

#content {
overflow-y: auto;
overflow-x: auto;
}
虽然现在,使用动态表格,我的页眉和页脚都不会在滚动时保持在 View 中。
为了尝试解决这个问题,我尝试在我的页面加载后重置 CSS,但这并不成功。如何在保持表格动态的同时创建固定/粘性页眉和页脚?
编辑:我正在寻找一种不需要为表格设置静态高度的解决方案。

最佳答案

你能试试我下面的代码吗,你应该在渲染innerhtml后设置高度

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Code</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
<style>
//CSS
body {
margin: 0;
height: 100%;
}

#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 56px 1fr 100px;
}
.fixed{height::100px;
overflow:scroll;}

#content {

}
</style>
</head>

<body>
<div id="wrapper">

<div id="header"></div>
<table id="content" width="150px" border="1">
<thead>
<tr><th>Head</th></tr>
</thead>
<tbody>
<tr>
<td>
<div class="fixed">
<table id="mybody"></table>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr><th>Foot</th></tr>
</tfoot>
</table>
<div id="footer"></div>

</div>
</body>
<script>
const arr=[ 1, 2, 3, 5, 6, 7, 10, 12, 17, 18];

jQuery(document).ready(function($) {

var table = $("#mybody");
$.each(arr, function (key, value){

let parent = $('<tr>');
let container = $('<td>').text('Test');
parent.append(container);
table.append(parent);

});

setTimeout(function(){
table.parent().css({"height":"100px"});
},100);


});
</script>
</html>

关于javascript - 网格和动态表的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63194334/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com