垂直滚动条未显示在用 javascript 填充的 html 表格中
我在简单的 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 problems
function 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回答
-
白猪掌柜的
这里我给你做了这个例子，如果你有什么不明白的，就告诉我:)<!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>
随时随地看视频慕课网APP
相关分类
Html5