Фоновые изображения DIV внутри ячеек таблицы не загружаются на лету - PullRequest
Новая
       2

Фоновые изображения DIV внутри ячеек таблицы не загружаются на лету

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

Я пытаюсь создать функцию, которая будет создавать таблицы на лету.

Каждая ячейка таблицы должна содержать DIV с фоновым изображением, что-то вроде галереи изображений.

Это код

код. js

function buildTable(rows,columns) {
    var table = document.createElement("table");
    table.className="gridtable";
    var tbody = document.createElement("tbody");

    var number = 1;

    for (row = 0; row < rows; row ++) { 
      var tr = document.createElement("tr");
      for (col = 0; col < columns; col ++) { 
        var td = document.createElement("td");
        var cellHTML = createDiv(number);
        number ++;
        td.appendChild(cellHTML);
        tr.appendChild(td);
      }
      tbody.appendChild(tr);  
    }
    table.appendChild(tbody);             
    return table;
}


function createDiv(number){
  var numString = number.toString(10);
  var css = "background-image: url('thumbnails/thumbnailXXX.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;";
  css = css.replace(/XXX/g, numString);

  let div = document.createElement('div');
  var style = document.createElement('style');
  style.type = 'text/css';
  div.appendChild(style);

  style.appendChild(document.createTextNode(css));
  return div;
}

индекс. html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <link rel="stylesheet" href="main.css"
  <script src="code.js"></script>
<script>
window.onload=function() {
  document.getElementById("content").appendChild(buildTable(5,6));
}
</script>
</head>
<body>

<div id="content"></div> 

</body>
</html>

main. css

table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}

Таблица создана правильно, но ячейки таблицы не содержат миниатюр,

Да, изображения миниатюр сохраняются в каталоге с именем thumbnails, который находится на том же уровне, что и javascript и html. Каждая миниатюра называется thumbnail1.jpg, thumbnail2.jpg, thumbnail3.jpg и др. c.

Почему изображения не отображаются?

1 Ответ

1 голос
/ 11 апреля 2020

Проблемы были:

  1. Вам нужно обернуть свой стиль в синтаксис css (т. Е. somthing { style; style; }).
  2. Вам нужно дать изображения height и width для их отображения.

Только для хорошей практики:

  1. Добавьте стиль к заголовку документа, должны быть все стили (вы также можете использовать встроенный стили на элементе div).
  2. У вас много повторяющихся кодов в стилях ячеек. Так что просто создайте класс css и используйте его.

Я только изменил этот код (я использовал другой URL, чтобы проверить его) и удалил отступы из ваших стилей td th: 

function createDiv(number) {
  var numString = number.toString(10);
  var css = "#thumbnailXXX{background-image: url('https://whatisbetterxyz.com/wp-content/uploads/2018/04/Red-or-Blue.png');";
  css = css.replace(/XXX/g, numString);

  let div = document.createElement('div');
  div.id = 'thumbnailXXX'.replace(/XXX/g, numString);
  div.classList.add('image-cell');
  var style = document.createElement('style');
  style.type = 'text/css';
  document.head.appendChild(style);

  style.appendChild(document.createTextNode(css));
  return div;
}


function buildTable(rows, columns) {
  var table = document.createElement("table");
  table.className = "gridtable";
  var tbody = document.createElement("tbody");

  var number = 1;

  for (row = 0; row < rows; row++) {
    var tr = document.createElement("tr");
    for (col = 0; col < columns; col++) {
      var td = document.createElement("td");
      var cellHTML = createDiv(number);
      number++;
      td.appendChild(cellHTML);
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);
  return table;
}

function createDiv(number) {
  var numString = number.toString(10);
  var css = "#thumbnailXXX{background-image: url('https://whatisbetterxyz.com/wp-content/uploads/2018/04/Red-or-Blue.png');";
  css = css.replace(/XXX/g, numString);

  let div = document.createElement('div');
  div.id = 'thumbnailXXX'.replace(/XXX/g, numString);
  div.classList.add('image-cell');
  var style = document.createElement('style');
  style.type = 'text/css';
  document.head.appendChild(style);

  style.appendChild(document.createTextNode(css));
  return div;
}
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table.gridtable th {
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

.image-cell {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <link rel="stylesheet" href="main.css" <script src="code.js">
  </script>
  <script>
    window.onload = function() {
      document.getElementById("content").appendChild(buildTable(5, 6));
    }
  </script>
</head>

<body>

  <div id="content"></div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...