代码之家 › 专栏 › 技术社区 › Duck

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

html javascript

Duck · 技术社区 · 4 年前

每个表格单元格必须包含一个带背景图像的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;
}

index.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>

主.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 thumbnail1.jpg , thumbnail2.jpg , thumbnail3.jpg

为什么图像没有显示?

1 回复 | 直到 4 年前

Omri Attiya 4 年前

问题是:

你需要用css语法包装你的风格(即 somthing { style; style; } ).
你需要提供图像 height 和 width 让他们表现出来。

只是为了良好的实践:

将样式附加到文档头部,应该有所有样式(您也可以在div元素上使用内联样式)。
单元格样式中有很多重复的代码。所以只要创建一个css类并使用它。

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>