Javascript 使用输入更新html表

我是第一次学习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>

BoxV1
#1111
蓝色

使用javascript和输入将上述块输入到表中

我在网络上四处窥探后尝试创建addRows方法，这创建了一个临时版本的表，在刷新时该表将为空（这意味着它没有被放入代码中，而是为该会话添加），如果可能的话，我希望将其永久地粘贴到表中

编辑：我有一些想法：

我觉得如果我做了一个简单的修改，并使用某种形式的innerHTML来添加块，可以做些什么

也许使用一些php表单来更新html表块

---

谢谢大家!

您可以使用localStorage保存添加的行，并在浏览器刷新时加载它们。如果清除本地存储或更改浏览器，则不会保存这些文件

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

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

---

尽管如此，这些方法实际上都没有将您输入的数据添加到“代码”中。在表中输入行时，javascript文件不会得到更新。所发生的事情是，javascript有一个函数来请求表中的所有行（从本地存储或从请求到服务器），然后循环检索到的信息，并根据结果为表构建HTML。

在javascript函数中，执行以下操作：给

tbody

一个id，例如

bodyId

---

document.getElementById（“bodyId”）.innerHtml+=”使用innerHtml或jQuery html（）函数和localstorage跟踪更新dom内容。还记得在页面加载时重新加载旧数据。
请参阅我的完整示例：


HTML输入：

<input type="text" id="one">
<input type="text" id="two">
<input type="text" id="three">
<button onclick="addRow()">ADD</button>


添加

JS功能：

$( document ).ready(function(){
  $('#screen').html(localStorage.getItem("data"));

});
 function addRow(){
      var str = '<tr class = "boxType">\
                 <td>'+$('#one').val()+'</td>\
                 <td>'+$('#two').val()+'</td>\
                 <td>'+$('#three').val()+'</td>\
                 </tr>';
      $('#screen').append(str);

      localStorage.setItem("data", $('#screen').html());
    }

$（文档）.ready（函数（）{
$（'#screen'）.html（localStorage.getItem（“数据”）；
});
函数addRow（）{
var str='1〕\
“+$（“#一”）.val（）+”\
'+$（'#two'）.val（）+'\
“+$（“#三”）.val（）+”\
';
$（'屏幕'）.append（str）；
localStorage.setItem（“data”，$（'#screen'）.html（）；
}
基本上，您只需要在JavaScript文件/部件中创建一个新行作为字符串，然后将其附加到现有表中：（使用jQuery）

我是否可以使用innerHTML方法和tbody id的组合来将tr块添加到tbody中？是的，您可以通过这种方式将行添加到表中。诀窍是您发现的——在事后保存行。我可能会编写一个使用localStorage存储信息的快速演示，因为这是一种将数据存储到bu的简单方法ild你的表。虽然不是一个像一个合适的服务器和数据库那样强大的解决方案。你会怎么说php表单在提交时通过在html表代码中插入块来更新html？或者这是另一个失误？我希望滑入一个“隐藏的”“在我的网站上创建一个页面，这样我就可以从任何地方查看表单。这可能会奏效，遗憾的是，我对php不是很熟悉，所以我不能真正地说。很抱歉。这是一把小提琴，显示了我刚才说的内容，你应该可以刷新或关闭浏览器，你输入的所有信息都会显示出来。我相信这种格式只保存了一个会话副本？我希望我偶尔会去检查和更新一些东西，以便将内容保存到服务器上。没有办法将其放入代码中吗？一些php表单怎么样？我能把输入的内容放到表格里吗？（知道这可能会很混乱）再次看到php是服务器端。您需要一个服务器代码来执行此操作。您需要的是，在php中，将数据保存到文件中。这就是你想要的吗？是的，我正在考虑将数据保存到html文件中，这样我就不必处理服务器数据了。这将只是个人使用和更新，所以我真的不介意它变成一个荒谬的代码块（这是我在文章中提到的个人示例中看到的）作为参考，这个家伙的表源代码只是在一行中，所以我认为他有某种形式的集合字符串，里面有输入词，只是被附加到html文件表块的最后一个元素的末尾，实际上并没有创建行。如果
var newRow=“Hammer53Red”它将创建一行，项目名称：Hammer，项目编号：53，项目颜色：红色。您还应该使用选择器as$（“#inventory”）来实际提供工作代码。好的，非常感谢您的反馈，我将在将来尽最大努力
var newRow = "my new row in html";

$("mytable").append(newRow);