Javascript 表单元格中未动态加载的DIV的背景图像

我正在尝试创建一个函数来动态创建表

每个表格单元格必须包含一个带有背景图像的DIV，类似于图像库

这是密码

code.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;
}

表格创建正确，但表格单元格不包含缩略图

是的，缩略图存储在名为

thumbnails

的目录中，该目录与javascript和html处于同一级别。每个缩略图都被命名为

thumbnail1.jpg

，

thumbnail2.jpg

，

thumbnail3.jpg

，等等

为什么图像不显示？

问题是：

您需要用css语法包装样式（即

somthing{style；style；}

）

您需要为图像显示提供

高度

和

宽度

仅为了良好实践：

将样式附加到文档的头部，应该有所有样式（也可以在div元素上使用内联样式）

单元格样式中有大量重复代码。所以只需创建一个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;
}

函数构建表（行、列）{
var table=document.createElement（“表”）；
table.className=“gridtable”；
var tbody=document.createElement（“tbody”）；
var数=1；
对于（行=0；行<行；行++）{
var tr=document.createElement（“tr”）；
用于（列=0；列<列；列++）{
var td=document.createElement（“td”）；
var cellHTML=createDiv（数字）；
数字++；
td.appendChild（cellHTML）；
tr.appendChild（td）；
}
t附肢儿童（tr）；
}
表3.儿童（t身体）；
返回表；
}
函数createDiv（编号）{
var numString=number.toString（10）；
var css=“#thumbnailXXX{背景图像：url（'https://whatisbetterxyz.com/wp-content/uploads/2018/04/Red-or-Blue.png');";
css=css.replace（/XXX/g，numString）；
设div=document.createElement（'div'）；
div.id='thumbnailXXX'。替换（/XXX/g，numString）；
div.classList.add（'image-cell'）；
var style=document.createElement（'style'）；
style.type='text/css'；
document.head.appendChild（样式）；
appendChild（document.createTextNode（css））；
返回div；
}

table.gridtable{
字体系列：verdana、arial、无衬线字体；
字体大小：11px；
颜色：#333333；
边框宽度：1px；
边框颜色：#666666；
边界塌陷：塌陷；
}
table.gridtable th{
边框宽度：1px；
边框样式：实心；
边框颜色：#666666；
背景色：#dedede；
}
table.gridtable td{
边框宽度：1px；
边框样式：实心；
边框颜色：#666666；
背景色：#ffffff；
}
.图像单元{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
宽度：20px；
高度：20px
}

页面标题
有控制台错误吗？没有，没有错误。
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;
}

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;
}