Question

我是第一次学习js，html，css和一般网络开发，我想创建一个简单的（或者我想到的）表，我可以亲自用它来跟踪我目前拥有的项目。

基本上我想做的是创建一个动态大小的表，可以获取并保存输入。

我在想一种方法来制作一些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和输入进入表中？

我试图在网络上窥探之后制作一个addRows方法，并创建了一个临时版本的表，刷新后会为空（意味着它没有放入代码中，而是为该会话添加），如果可能的话，我想永久地把它放在桌子上。

编辑：我有一些想法：

如果我制作一个＆lt; tbody id =“list”＆gt;我觉得可以做点什么并使用某种形式的innerHTML来添加＆lt; tr＆gt;阻止？

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

谢谢！

Answer 1

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

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

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

所有这些说明，这些方法都没有将您输入的数据实际添加到代码中＃34;。当您在表格中输入行时，您的javascript文件不会更新。会发生什么事情是你的javascript有一个函数来请求表的所有行（从localStorage或从请求到服务器）然后遍历检索到的信息并从结果中为表构建HTML。

Answer 2

在您的javascript函数中执行：为您的tbody提供ID，例如bodyId document.getElementById("bodyId").innerHtml += "<tr class = 'boxType' <th>BoxV1</th<th>#1111</th><th>Blue</th</tr>"

Answer 3

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

http://jsbin.com/voroku/edit?html,output

HTML INPUT：

<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());
    }

Answer 4

你基本上只需要在JavaScript文件/部分中创建一个新行，然后将其附加到现有表中:(使用jQuery）

var newRow = "my new row in html";

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

使用输入更新html表

4 个答案: