現在、CSSを介して動的なsap.m.tableに背景画像を静的に設定しています。ただし、CSSではなくJavascriptで背景画像を設定したいと思います。たとえば、次のような画像の配列があるとします。
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 。
これを行う方法は複数ありますが、テーブルから2D配列を作成し、行と列に基づいて好きなロジックを実行して、それを繰り返すことをお勧めします。
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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加