Question

美好的一天，

我有一个表可以动态添加/删除行，在每一行上你可以添加一个从列表中选择一个项目，它目前工作得很好，我想要添加的是保留添加的行和即使我的页面重新加载我的浏览器它的价值？

我在研究中看到你可以通过使用cookies / localStorage来实现它，但是如果我在其上存储了很多项目就可以了吗？

继承人我的桌子看起来像： enter image description here 我的JS：

function addRow(){
var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
var rowArrayId = rowCount ;
var toBeAdded = document.getElementById('toBeAdded').value;

if (toBeAdded=='')
    { toBeAdded = 2; }
else if(toBeAdded>10)
{
  toBeAdded = 10;
}

  for (var i = 0; i < toBeAdded; i++) {
  var rowToInsert = '';
  rowToInsert = "<tr><td><input id='itemName"+rowArrayId+"' required name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />"+
  "<input type='hidden' class='rowId' value='"+rowArrayId+"'>"+
  "<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'></td>";
    $("#tblItemList tbody").append(
        rowToInsert+
        "<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
        "<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
        "<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
        "<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
        "<td class='subtotal'><center><h3>0.00</h3></center></td>"+
        "<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
        "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
        "</tr>");

var rowId = "#itemName"+rowArrayId;
$(rowId).select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    formatNoMatches: function( term ) { 

      $('.select2-input').on('keyup', function(e) {
         if(e.keyCode === 13) 
           {
            $("#modalAdd").modal();          
            $(".select2-input").unbind( "keyup" );
           }
      });

    return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>";
    },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   

});

rowArrayId = rowArrayId + 1;

};

function productFormatResult(product) {
  var html = "<table><tr>";
  html += "<td>";
  html += product.itemName ;
  html += "</td></tr></table>";
  return html;
}

function productFormatSelection(product) {
   var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
   return selected + product.itemName;
}
  $(".qty, .price").bind("keyup change", calculate);
};

这里的问题是，每当我刷新页面时，我添加的项目也会丢失，以及我添加的那些行，有什么建议吗？非常感谢你的时间！祝你有美好的一天！

Answer 1

这里最好的选择是存储json数据的cookie。

Your best bet here would be to cookies to store json data.

function storeRowData() {
    var data = [];
    $('.TABLE_NAME tr').each(function () {
        var $this = $(this),
            pname = $this.find(PRODUCT_NAME_INPUT).val(),
            desc = $this.find(PRODCUT_DESC_INPUT).val(),
            quant = $this.find(PRODUCT_QUANTITY_INPUT).val(),
            price = $this.find(PRODUCT_PRICE_INPUT).val();
        var temp = { productName: pname, description: desc, quantity: quant, price: price };
        data.push(temp);
    });

    $.cookie('Table_Rows', JSON.stringify(data), {OPTIONS});
}

现在无论何时添加或删除行，都可以调用它。当你重新加载页面时，只需读取cookie并将字符串解析回JSON并遍历并为每行调用addrow。

注意：请务必阅读有关jquery.cookie（）Here的完整文档

Answer 2

你可以使用window.location.reload（true）和$（document）.ready函数，你可以获得当前的no。行数。定义行数＆amp;列计数变量作为全局变量。

location.reload(true); 
var rowCount,rowArrayId,toBeAdded ;
$(document).ready(function() {
 rowCount= document.getElementById('tblItemList').rows.length - 1 ;
rowArrayId = rowCount ;
toBeAdded = document.getElementById('toBeAdded').value;
});

如何在页面重新加载后保留添加行及其值

2 个答案: