Question

我是一名新的JavaScript学习者。我目前正在尝试通过使用按钮将新表附加到现有页面。该函数接受一个列表，并将数字，平方和立方值打印到表中。当我按下按钮时，旧表被删除并被新表覆盖。如何将新表附加到页面上？所有建议表示赞赏。这是我的代码

<!DOCTYPE html>

<html lang="en">

<head>
    <title>
    </title>
    <script>
        function table(a) {
            document.write('<table>');
            document.write("<tr><td>Number</td><td>Square</td><td>Cube</td></tr>");
            for (var i = 0; i < a.length; i++) {
                document.write("<tr><td>" + a[i] + "</td><td>" + Math.pow(a[i], 2) + "</td><td>" + Math.pow(a[i], 3) + "</td></tr>");
            }
            document.write('</table>')
        }

    </script>
</head>

<body>
    <script>
        var list1 = [1, 2, 3, 4, 5, 6];
        table(list1);

    </script>
    <input type="button" onclick="table([7,8,9,10]) " value="dispay table">
    <!-- this button removes overwrites the old table-->
</body>

</html>

Answer 1

Document.write清除整个页面。您应该修改HTML。

在下面的代码中，我创建了一个带有ID（＆＃34; tableDiv＆＃34;）的div，我可以在javascript代码（document.getElementById）中找到它。

第一步清除里面的html（替换旧表），然后根据你的代码构建一个html字符串。最后，它将html放在容器中。

＆＃13;

<!DOCTYPE html>

<html lang="en">

<head>
  <title>
  </title>
  <script>
    function table(a) {
      // remove the old table
      var container = document.getElementById('tableDiv');
      container.innerHTML = "";

      // create table
      var html = "<table id=\"myTable\"><tr><td>Number</td><td>Square</td><td>Cube</td></tr>";

      // add cells
      for (var i = 0; i < a.length; i++) {
        html += ("<tr><td>" + a[i] + "</td><td>" + Math.pow(a[i], 2) + "</td><td>" + Math.pow(a[i], 3) + "</td></tr>");
      }

      // end table
      html += "</table>";

      container.innerHTML = html;
    }
  </script>
</head>

<body>

  <div id="tableDiv">

  </div>

  <input type="button" onclick="table([7,8,9,10]) " value="display table">
  <!-- this button removes overwrites the old table-->

  <script>
    var list1 = [1, 2, 3, 4, 5, 6];
    table(list1);
  </script>

</body>

</html>

＆＃13;

Answer 2

我强烈建议您查看：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append。

如果你看一下这些例子，你可以看到一种更好的DOM工作方式，包括如何创建元素，并在网页上操作它们。

关于您的具体问题，.write函数似乎会在您在新上下文中调用时覆盖，因此您需要将创建的所有文本保存到列表中，更新列表，然后更新DOM，或使用DOM API（这将更容易）。

我为更难的方式制作了JS bin，但这仍有问题，因为它会覆盖原始按钮。

使用javascript将表附加到当前页面

2 个答案: