javascript - 如何在 Javascript 中设置表格单元格的背景图像?
问题描述
我目前正在通过 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 。
解决方案
有不止一种方法可以做到这一点,但我建议从您的表中创建一个二维数组,然后根据行数和列数对其进行迭代,执行您喜欢的任何逻辑:
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 - 从 Json 树结构创建测验
- google-cloud-build - GCP:如何从 proj-2 CloudBuild 访问 proj-1 秘密管理器?
- scala - 在 spark/scala 的另一个数据框中查找多个列值
- html - 如何将图像放入父块 div 中?
- python - 模型的空参数列表
- java - 如何在java中播放wav文件?
- reactjs - 如何为 react-redux 写故事书?
- javascript - 在 for 循环中填充数组数组获得第二个值
- c++ - 使用 DLTLog 输出日志时,程序崩溃
- node.js - Snowflake 节点驱动程序的“isUp()”方法为终止连接返回错误结果