Перевести таблицу в чистом виде js

Question

Я сделал простую таблицу в HTML, CSS и Bootstrap, и я хочу изменить даты в ячейках. (перевести текст)

<table class="table table-striped" id="TabelPret">
    <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">service</th>
            <th scope="col">price(Euro)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>consulting</td>
            <td>50</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>RECONSULT</td>
            <td>15</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>1 procedur/30 min</td>
            <td>10</td>
        </tr>                                            
    </tbody>
</table>
    

Теперь для JS я пытаюсь выбрать таблицу, а затем добавить новые строки и столбцы:

var array = [
    ["a1", "b1", "c1"],
    ["a2", "b1", "c1"],
    ["a3", "b1", "c1"],
    ["a4", "b1", "c1"],
    ["a5", "b1", "c1"],
    ["a6", "b1", "c1"],
    ["a7", "b1", "c1"]
];

Этот массив будет новыми ячейками, поэтому (a1 переводится для id, b1 переводится для консультации, c1 переводится для цены ... et c)

table = document.getElementById("TabelPret");
for (var i = 0; i < table.rows.length; i++) {
  for (var j = 0; i < table.rows[i].cells.length; j++) {
    table.rows[i].innerHTML = array[i][j];
  }
}

Этот код мне не подходит, есть еще вариант? Только в чистом JavaScript таблица будет stati c.

Спасибо за помощь и время.

Answer 1

L oop вместо этого над массивом и используйте document.createElement для создания строк и ячеек для добавления к tbody.

const tbody = document.querySelector('table > tbody');
var array = [
      ["a1", "b1", "c1"],
      ["a2", "b1", "c1"],
      ["a3", "b1", "c1"],
      ["a4", "b1", "c1"],
      ["a5", "b1", "c1"],
      ["a6", "b1", "c1"],
      ["a7", "b1", "c1"],
    ];
for (var i = 0; i < array.length; i++) {
  const row = document.createElement('tr');
  for (var j = 0; j < array[i].length; j++) {
    const cell = document.createElement('td');
    cell.textContent = array[i][j];
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}

<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped" id="TabelPret">
  <thead>
    <tr>
      <th scope="col">id</th>
      <th scope="col">service</th>
      <th scope="col">price(Euro)</th>
    </tr>
  </thead>
  <tbody>                            
  </tbody>
</table>

Answer 2

Попробуйте это в вашем l oop, чтобы ссылаться на каждую ячейку и назначить из вашего 2-го массива:

table.rows[i].cells[j].innerHTML = array[i][j];