javascript - 用纯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>