Question

我有一个HTML表格，我使用 jQuery 添加和删除行。当我添加例如10行然后重新加载页面时，所有添加的数据都将被删除。

如何在重新加载页面后保留该数据？

这是我到目前为止所做的：

＆＃13;

function AddRow() {
  $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>")
}
$('.print-table').on('click', '.removebtn', function() {
  $(this).parent().parent().remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table print-table">
  <thead>
    <tr class="danger">
      <th width="30">S#</th>
      <th width="100">VOUCHER#</th>
      <th width="80">ID</th>
      <th>FULL NAME OF STUDENT</th>
      <th width="80">PAYABLE</th>
      <th width="80">PAID</th>
      <th width="100">PAID ON</th>
      <th width="110">CLOSE-BAL</th>
      <th width="80">ACTION</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>999</td>
      <td>
        <input type="text" name="id" disabled="disabled">
      </td>
      <td>
        <input type="text" name="id" disabled="disabled">
      </td>
      <td>
        <input type="text" name="id" autofocus>
      </td>
      <td>
        <input type="text" name="id" disabled="disabled">
      </td>
      <td>
        <input type="text" name="id">
      </td>
      <td>
        <input type="text" name="id" onfocusout="AddRow()">
      </td>
      <td>00</td>
      <td>
        <button class="btn btn-primary btn-xs removebtn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>
<button class="btn btn-primary xs" onclick="AddRow()">Add Row</button>

＆＃13;

Answer 1

您需要存储来存储您的数据。类似于dataBase localStorage和sessionStorage。在您的问题中，localStorage就足够了。

当html加载时，你需要判断localStorage是否有value.if有值你只需用javascript填充表（创建tabale并使用$（'。print-table'）。html（））;

添加和删除行时，需要存储数据;

例如：

存储数据

var data;//your data
localStorage.data = data;//store the data;

获取数据;

var odlData;
if(localStorage.data){
  var data = localStorage.data;
  //code (use jq to fill html with created table with data)
 }

为什么删除它???

Answer 2

您需要将这些新创建的行存储起来并在加载网站后（或加载时）将它们加载到您的dom中。

您通过JavaScript添加的行只是暂时的，因此不会保存在您的文件中，因为您只是操作dom。更精确一点：这些更改仅适用于您，在您正在使用的浏览器中。

要使其永久化（因此对每个人都可见），您需要保存创建的行，如上所述。

例如，您可以将这些行存储在.txt文件或数据库中，有点依赖于您要对其执行的操作。您可以序列化这些值并在反序列化后加载它们并将其附加到硬编码表中。

Answer 3

将数据设置为localstorage并稍后检索。

localstorage.setItem("data", "<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>");

    <script type="text/javascript">
   var olddata = localstorage.getItem("data");

    $('.print-table').append(data);

        function AddRow() {
            $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>")

    localstorage.setItem("data", localstorage.getItem("data")+"<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>");

        }
        $('.print-table').on('click','.removebtn', function() {
             $(this).parent().parent().remove();
        });
    </script>

保持页面数据重新加载

3 个答案: