第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

垂直滾動條未顯示在用 javascript 填充的 html 表中

垂直滾動條未顯示在用 javascript 填充的 html 表中

喵喵時光機(jī) 2022-06-09 16:06:26
我無法在簡單的 HTML 表格中設(shè)置垂直滾動條。表格在沒有滾動條的情況下不斷擴(kuò)展,需要用戶使用瀏覽器的欄來閱讀直到結(jié)束。該表具有以下 HTML 代碼:<div id="table">  <table id="mytable">  </table></div>以下 JavaScript 函數(shù)在運(yùn)行時填充表: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貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個贊

在這里我為你做了這個例子,如果你有什么不明白的,請告訴我:)


<!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>


查看完整回答
反對 回復(fù) 2022-06-09
  • 1 回答
  • 0 關(guān)注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號