javascript - 使用输入更新 html 表

Question

我是第一次学习 js、html、css 和一般 Web 开发，我想创建一个简单的(或者我认为的)表格，我可以个人使用它来跟踪我当前拥有的项目。

本质上，我想做的是制作一个可以接收和保存输入的动态大小的表。

我正在考虑一种方法来制作一些 javascript 函数，以便根据给定的输入将标签添加到我的表中。我看到一个个人网站，其中开发人员有一个带有提交按钮的输入框，导致数据被添加到另一个 html 文件的表格中。

例如，如果我有:

<table id="inventory">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Item Number</th>
      <th>Item Color</th>
    </tr>
  </thead>
</table>

我可以说添加吗

<tr class = "boxType">
  <th>BoxV1</th>
  <th>#1111</th>
  <th>Blue</th>
</tr>

使用javascript和输入将上面的 block 插入到表中？

我在网上四处窥探后尝试创建一个 addRows 方法，它创建了一个临时版本的表，在刷新时该表将是空的(这意味着它没有放入代码中，而是为该 session 添加)，如果可能的话，我想把它永久地贴在 table 上。

编辑:我的一些想法:

如果我制作一个 并使用某种形式的 innerHTML 添加 block ，我觉得可以做些什么？

也许使用一些 php 表单来更新 html 表格 block ？

谢谢!

Answer 1

您可以使用 localStorage 保存您添加的行并在浏览器刷新时加载它们。如果 localstorage 被清除或者如果您更改浏览器，它们将不会被保存。

永久保存您输入的信息的方法是拥有一个数据库并将数据存储在那里。这可以通过使用“后端”来处理信息请求、从数据库中检索记录并将其发送回 javascript/html 页面来完成。

有很多方法可以构建后端来处理这些请求，我熟悉使用在服务器上运行的 c# 和 SQL 数据库来存储信息。描述所有可能的实现远远超出了这个问题的范围。

总而言之，这些方法都没有真正将您输入的数据添加到“代码中”。当您在表格中输入行时，您的 javascript 文件不会更新。发生的情况是您的 javascript 有一个函数来请求表的所有行(从 localStorage 或从对服务器的请求)，然后循环遍历检索到的信息并根据结果为表构建 HTML。