文章/答案/技术大牛

发布

社区首页 >问答首页 >将动态表保存到LocalStorage

问将动态表保存到LocalStorage
EN

Stack Overflow用户

提问于 2022-07-09 11:23:39

回答 1查看 42关注 0票数 1

我的have应用程序中有一个动态表。我想把这个表保存到LocalStorage中。我试了很多次，但都没成功。

这是表的HTML：

jQuery(document).delegate('a.add-record_alg', 'click', function(e) {
  e.preventDefault();
  var content = jQuery('#sample_table_alg tr'),
    size = jQuery('#tbl_posts_alg >tbody >tr').length + 1,
    element = null,
    element = content.clone();
  element.attr('id', 'rec_alg-' + size);
  element.find('.delete-record_alg').attr('data-id', size);
  element.appendTo('#tbl_posts_body_alg');
  element.find('.sn').html(size);
});
jQuery(document).delegate('a.delete-record_alg', 'click', function(e) {
  e.preventDefault();
  var didConfirm = confirm("Ruimte verwijderen?");
  if (didConfirm == true) {
    var id = jQuery(this).attr('data-id');
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#rec_alg-' + id).remove();

    //regnerate index number on table
    $('#tbl_posts_body_alg tr').each(function(index) {
      //alert(index);
      $(this).find('span.sn').html(index + 1);
    });
    return true;
  } else {
    return false;
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div class="wellclearfix">
  <a class="btn btn-primary pull-right add-record_alg" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a>
</div>

<div class="container-fluid" style="margin-left:1px ;">
  <form enctype="multipart/form-data">
    <table class="table table-stripped" id="tbl_posts_alg">
      <thead style="background-color:#c7c8cc;">
        <tr>
          <th style="width: 100px ;">Nummer</th>
          <th style="width: 350px;">Naam</th>
          <th>Gebruiksfunctie</th>
          <th>Gebruiksoppervlakte [m2]</th>
          <th style="width: 111px;">Verwijderen</th>
        </tr>
      </thead>
      <tbody id="tbl_posts_body_alg">
        <tr id="rec_alg-1">
          <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td>
          <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td>
          <td>
            <label for="functie"> </label>
            <select class="functiedropdown" name="Functie" id="functie">
              <option value="verkeersruimte">selecteer een functie!</option>
              <option value="verkeersruimte">verkeersruimte</option>
              <option value="meterruimte">meterruimte</option>
              <option value="toiletruimte">toiletruimte</option>
              <option value="verblijfsruimte">verblijfsruimte</option>
              <option value="verblijfsruimte">techniekruimte</option>
              <option value="verblijfsruimte">bergruimte</option>
              <option value="verblijfsruimte">wasruimte</option>
              <option value="verblijfsruimte">badruimte</option>
              <option value="verblijfsruimte">onbenoemde ruimte</option>
            </select>
          </td>
          <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td>
          <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
        </tr>
      </tbody>
    </table>
</div>
</form>

<div style="display:none;">
  <table id="sample_table_alg">
    <tr id="">
      <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td>
      <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td>
      <td>
        <label for="functie"> </label>
        <select class="functiedropdown" name="Functie" id="functie">
          <option value="verkeersruimte">selecteer een functie!</option>
          <option value="verkeersruimte">verkeersruimte</option>
          <option value="meterruimte">meterruimte</option>
          <option value="toiletruimte">toiletruimte</option>
          <option value="verblijfsruimte">verblijfsruimte</option>
          <option value="verblijfsruimte">techniekruimte</option>
          <option value="verblijfsruimte">bergruimte</option>
          <option value="verblijfsruimte">wasruimte</option>
          <option value="verblijfsruimte">badruimte</option>
          <option value="verblijfsruimte">onbenoemde ruimte</option>
        </select>
      </td>
      <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td>
      <td><a class="btn btn-xs delete-record_alg" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td>
    </tr>
  </table>
</div>
</div>
</div>

最好是将表存储到每个表数据的LocalStorage中，因为稍后我需要在另一个页面上再次使用一些值。我尝试将整个表保存到LocalStorage中，这是可能的，但我说过的是，我需要稍后再使用表数据。

有人能帮帮我吗？(我希望我解释得很好，xD)

提前感谢！

javascript

html

jquery

回答 1

Stack Overflow用户

发布于 2022-07-09 11:41:16

不建议使用

委托。只需使用.on -注意，我在delete
中将.on添加到表中--请与jQuery/$
保持一致--我存储DOM outerHTML。

const $table = $("#tbl_posts_alg");
const addToStorage = () => {
 // localStorage.setItem("table",$table[0].outerHTML);  // UNCOMMENT ON YOUR SERVER   
   console.log($table[0].outerHTML); //SO does not allow localStorage in snippets
};
$(document).on('click','a.add-record_alg', function(e) {
  e.preventDefault();
  var content = $('#sample_table_alg tr'),
    size = $('#tbl_posts_alg >tbody >tr').length + 1,
    element = null,
    element = content.clone();
  element.attr('id', 'rec_alg-' + size);
  element.find('.delete-record_alg').attr('data-id', size);
  element.appendTo('#tbl_posts_body_alg');
  element.find('.sn').html(size);
  addToStorage()
});
$table.on('click','a.delete-record_alg', function(e) {
  e.preventDefault();
  var didConfirm = confirm("Ruimte verwijderen?");
  if (didConfirm) {
    var id = $(this).attr('data-id');
    var targetDiv = $(this).attr('targetDiv');
    $('#rec_alg-' + id).remove();

    //regnerate index number on table
    $('#tbl_posts_body_alg tr').each(function(index) {
      //alert(index);
      $(this).find('span.sn').html(index + 1);
    });
    addToStorage();
  }
  return didConfirm;
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div class="wellclearfix">
  <a class="btn btn-primary pull-right add-record_alg" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a>
</div>

<form enctype="multipart/form-data">
  <div class="container-fluid" style="margin-left:1px ;">
    <table class="table table-stripped" id="tbl_posts_alg">
      <thead style="background-color:#c7c8cc;">
        <tr>
          <th style="width: 100px ;">Nummer</th>
          <th style="width: 350px;">Naam</th>
          <th>Gebruiksfunctie</th>
          <th>Gebruiksoppervlakte [m2]</th>
          <th style="width: 111px;">Verwijderen</th>
        </tr>
      </thead>
      <tbody id="tbl_posts_body_alg">
        <tr id="rec_alg-1">
          <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td>
          <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td>
          <td>
            <label for="functie"> </label>
            <select class="functiedropdown" name="Functie" id="functie">
              <option value="verkeersruimte">selecteer een functie!</option>
              <option value="verkeersruimte">verkeersruimte</option>
              <option value="meterruimte">meterruimte</option>
              <option value="toiletruimte">toiletruimte</option>
              <option value="verblijfsruimte">verblijfsruimte</option>
              <option value="verblijfsruimte">techniekruimte</option>
              <option value="verblijfsruimte">bergruimte</option>
              <option value="verblijfsruimte">wasruimte</option>
              <option value="verblijfsruimte">badruimte</option>
              <option value="verblijfsruimte">onbenoemde ruimte</option>
            </select>
          </td>
          <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td>
          <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

<div style="display:none;">
  <table id="sample_table_alg">
    <tr id="">
      <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td>
      <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td>
      <td>
        <label for="functie"> </label>
        <select class="functiedropdown" name="Functie" id="functie">
          <option value="verkeersruimte">selecteer een functie!</option>
          <option value="verkeersruimte">verkeersruimte</option>
          <option value="meterruimte">meterruimte</option>
          <option value="toiletruimte">toiletruimte</option>
          <option value="verblijfsruimte">verblijfsruimte</option>
          <option value="verblijfsruimte">techniekruimte</option>
          <option value="verblijfsruimte">bergruimte</option>
          <option value="verblijfsruimte">wasruimte</option>
          <option value="verblijfsruimte">badruimte</option>
          <option value="verblijfsruimte">onbenoemde ruimte</option>
        </select>
      </td>
      <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td>
      <td><a class="btn btn-xs delete-record_alg" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td>
    </tr>
  </table>
</div>
</div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72920948

复制

相似问题

问将动态表保存到LocalStorage
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将动态表保存到LocalStorageEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将动态表保存到LocalStorage
EN