如何在 Javascript 中设置 table 个单元格的背景图片？

Question

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

 var imgArray = imageUrl1, imageUrl2, imageUrl3, imageUrl4.

我想遍历数组并将 table 的单元格分配给 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;
}

这是描述我如何创建 table 的 jsbin 的 link：https://jsbin.com/huyiyofexu/edit?html,css,js,output。

Answer 1

有不止一种方法可以做到这一点，但我建议从您的 table 创建一个二维数组，然后根据行和列编号对其进行迭代，执行您喜欢的任何逻辑：

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>

如何在 Javascript 中设置 table 个单元格的背景图片？

How do I set background images of table cells in Javascript?

javascript

css

sapui5