用纯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翻译为价格......等）

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 中，表格才会是静态的。

感谢您的帮助和时间。

Answer 1

相反，循环遍历数组并用于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>