javascript - 如何在 Javascript 中设置表格单元格的背景图像？

Question

我目前正在通过 CSS 在我的动态 sap.m.table 中静态设置背景图像。但是，我想用 Javascript 而不是 CSS 设置我的背景图片。例如，给定一个像这样的图像数组:

 var imgArray = imageUrl1, imageUrl2, imageUrl3, imageUrl4. 

我想遍历数组并将表格的单元格分配给 imageUrls。

我目前正在 CSS 中做这样的事情:

.sapMListTblCell:nth-child(2) {
    background-image: url("https://image.shutterstock.com/image-photo/cute-baby-tabby-short-hair-260nw-160585535.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

这是描述我如何创建表的 jsbin 的链接:https://jsbin.com/huyiyofexu/edit?html,css,js,output .

Answer 1

有不止一种方法可以做到这一点，但我建议从你的表中创建一个二维数组，然后根据行和列数字迭代它做任何你喜欢的逻辑:

const bgs = [
  ["red", "green", "blue"],
  ["magenta", "yellow", "cyan"],
  ["black", "gray", "white"]
];

document.addEventListener("DOMContentLoaded", () => {
  const myTable = document.getElementById("MyTable");
  
  const trs = Array.from(myTable.querySelectorAll("tr"));
  const grid = trs.map((tr) => {
    const tds = Array.from(tr.querySelectorAll("td"));
    return tds;
  }); 


  grid.forEach((row, rowNum) => {
    row.forEach((tdElement, colNum) => {
      tdElement.style.background = bgs[rowNum][colNum];
    });
  });
});

td {
  height: 100px;
  width: 100px;
  text-align: center;
}

<table id="MyTable">
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>