Вертикальная полоса прокрутки не отображается в таблице html, заполненной javascript - PullRequest
Новая
       23

Вертикальная полоса прокрутки не отображается в таблице html, заполненной javascript

0 голосов
/ 01 апреля 2020

У меня проблемы с установкой вертикальной полосы прокрутки в простой таблице 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 и нет тела.

1 Ответ

0 голосов
/ 01 апреля 2020

Здесь я сделал этот пример для вас, если вы ничего не понимаете, просто скажите мне:) 

<!DOCTYPE html>
<html lang="en-us">
<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>
...