如果单击按钮，香草 javascript 会更新表格

Question

单击按钮后，我正在尝试更新表格。我使用以下 HTML 代码创建了表格和按钮

<button type="button" onclick="calculateMatrixFact()">Calculate MF!</button>

<table id = "matrix_factorization">
  <tr>
    <th>User</th>
    <th>Movie One</th>
    <th>Movie Two</th>
  </tr>
</table>

虽然我在 onclick 事件上调用的函数如下：

function calculateMatrixFact(){
    var cache = CacheValues();
  
  // split the array in two single arrays one per each user and movie
    var user_matrix = createGroups(cache.mu, 2);
    var score_matrix = createGroups(cache.ms, 2);

    // remove the string user_name and movie_name
    for (let i = 0; i < user_matrix.length && i < score_matrix.length; i++) {
    user_matrix[i].shift();
    score_matrix[i].shift();
    }

    var dot_matrix = [];

    // perform the dot product
    for (let j = 0; j < user_matrix.length; j++) {
    for (let k = 0; k < score_matrix.length; k++) {
        //console.log(user_matrix[j])
        //console.log(score_matrix[k])
        var dot_product = math.multiply(user_matrix[j], score_matrix[k]);
        dot_matrix.push(dot_product);
    }
    }

    // create the matrix and push back the string (first column of the table)
    var dot_prod_matrix = createGroups(dot_matrix, 2);
    dot_prod_matrix[0].unshift("Anna");
    dot_prod_matrix[1].unshift("Jonny");

    // from array to HTML table
    fetch = document.getElementById('matrix_factorization');
    for (var i = 0; i < dot_prod_matrix.length; i++) {
    var newRow = fetch.insertRow(fetch.length);
    for (var j = 0; j < dot_prod_matrix[i].length; j++) {
        var cell = newRow.insertCell(j);
        cell.innerHTML = dot_prod_matrix[i][j];
    }
    }
}

我认为问题在于每次单击按钮时我都不会重置表格，对吗？如何删除旧信息并插入新信息？

这里可以看到完整代码：https://jsfiddle.net/932ebu0v/7/

Answer 1

因为这个块在你的函数的最后一个：

    fetch = document.getElementById('matrix_factorization');
    for (var i = 0; i < dot_prod_matrix.length; i++) {
    var newRow = fetch.insertRow(fetch.length);
    for (var j = 0; j < dot_prod_matrix[i].length; j++) {
        var cell = newRow.insertCell(j);
        cell.innerHTML = dot_prod_matrix[i][j];
    }
    }

fetch 将获取包含行的现有表，您只需将新行插入其中。 然后，您可以清除整个表格，重新添加表头并插入行（表头的清除和重新实例化将在一行代码中完成！！）：

fetch = document.getElementById('matrix_factorization');

// Just use this line to clear whole table and put back the header row
fetch.innerHTML = `<tr>
    <th>User</th>
    <th>Movie One</th>
    <th>Movie Two</th>
  </tr>`; // Put your whole <th> here.

// as for the rest, just let it be
for (var i = 0; i < dot_prod_matrix.length; i++) {
    var newRow = fetch.insertRow(fetch.length);
    for (var j = 0; j < dot_prod_matrix[i].length; j++) {
        var cell = newRow.insertCell(j);
        cell.innerHTML = dot_prod_matrix[i][j];
    }
    }

Answer 2

一个简单的解决方案是保留<thead> 元素中的第一行，因为它用作表的标题。其余行位于 <tbody> 元素内。每次单击按钮时只会重置表体。

// access tbody (thead remains unimpacted)
var mfTableBody = document.querySelector('#matrix_factorization tbody');
mfTableBody.innerHTML = ''; // clear tbody
for (var i = 0; i < dot_prod_matrix.length; i++) {
  // insert tr inside tbody
  var newRow = mfTableBody.insertRow(fetch.length);
  for (var j = 0; j < dot_prod_matrix[i].length; j++) {
    var cell = newRow.insertCell(j);
    cell.innerHTML = dot_prod_matrix[i][j];
  }
}

<table id="matrix_factorization">
  <thead>
    <tr>
      <th>User</th>
      <th>Movie One</th>
      <th>Movie Two</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>