Как мне установить фоновые изображения ячеек таблицы в Javascript?

Question

В настоящее время я статически устанавливаю фоновые изображения в моей динамической таблице sap.m.table с помощью CSS. Тем не менее, я хочу установить мои фоновые изображения в 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>