我在简单的 HTML 表格中设置垂直滚动条时遇到问题。该表格在没有滚动条的情况下不断延伸，需要用户使用浏览器的滚动条来阅读它直到结束。该表具有以下 HTML 代码：<div id="table"> <table id="mytable"> </table></div>以下 JavaScript 函数在运行时填充该表：function addTableHeader(){ var table = document.getElementById('mytable') var header = table.createTHead() var row = header.insertRow(0) var cell1 = row.insertCell(0) var cell2 = row.insertCell(1) var cell3 = row.insertCell(2) cell1.innerHTML = "<b>Category</b>" cell2.innerHTML = "<b>Rating</b>" cell3.innerHTML = "<b>Price</b>"}// dots are passed correctly, in fact the data shows up with no problemsfunction addTableRow(dot){ d_row_filter = [dot.prime_genre, dot.user_rating, dot.price] var table = document.getElementById('mytable') var row = table.insertRow(-1) var cell1 = row.insertCell(0) var cell2 = row.insertCell(1) var cell3 = row.insertCell(2) cell1.innerHTML = d_row_filter[0] cell2.innerHTML = d_row_filter[1] cell3.innerHTML = d_row_filter[2]}这是 CSS 代码：table { overflow-y: auto; visibility: hidden; position: absolute; top: 30px; left: 1000px; font-family: sans-serif; font-size: 0.7em; height: 300px;}tr:nth-child(even) { background-color: #d9d9d9;}不知道它是否有用，但我注意到每一行都包含在 thead 中，并且没有 tbody。
1 回答
白猪掌柜的
TA贡献1893条经验 获得超10个赞
这里我给你做了这个例子，如果你有什么不明白的，就告诉我:)
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#table-container {
height: 300px;
overflow-y: auto;
/*to prevent it from taking the whole width of the body*/
display: inline-block;
}
#table-container table {
font-family: sans-serif;
font-size: 0.7em;
}
#table-container table tr:nth-child(even) {
background-color: #d9d9d9;
}
.fa-star {
color: lightgreen;
}
</style>
</head>
<body>
<!-- give a good names so anyone reads your code can understand it -->
<div id="table-container">
<table></table>
</div>
<script>
// declare it only once to use it anywhere
let table = document.querySelector("#table-container table");
function addTableHeader() {
// simple and better for reading
table.innerHTML += "<tr><th>Category</th><th>Rating</th><th>Price</th><tr>";
}
function addTableRow(dot) {
/* I'm using `template strings` and it's ES6 feature, if you don't know it check this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals */
table.innerHTML += `<tr><td>${dot.prime_genre}</td><td>${dot.user_rating}</td><td>${dot.price}</td><tr>`;
}
//-- Testing ----------------------------------------------------
addTableHeader();
for(let i = 0;i < 200;i++) {
// I'm just simulating a filled table so you see the result of scrolling
addTableRow({prime_genre: `a${i + 1}`, user_rating: `<i class="fa fa-star"></i>`.repeat(Math.floor(Math.random() * 5 + 1)), price: "$" + (Math.random() * 20 + 10).toFixed(2)});
}
//---------------------------------------------------------------
</script>
</body>
</html>
- 1 回答
- 0 关注
- 60 浏览
添加回答
举报
0/150
提交
取消