Question

我创建了一个html表，该表会自动从输入表单中添加新行。当我对其进行测试时，会添加新行，但是刷新页面后，它就消失了。如何将新行保存在本地存储中，以便保留新数据。

<script>
    var table = document.getElementById("orders");
    var row = table.insertRow(-1);

    var Order_ID = row.insertCell(0);
    var Order_Date = row.insertCell(1);
    var Customer_Name = row.insertCell(2);
    var Order_Balance_without_tax = row.insertCell(3);
    var Downpayment_Balance = row.insertCell(4);
    var Order_Delivered = row.insertCell(5);
    var Delivery_Date = row.insertCell(6);
    var Final_Order_Balance_with_tax = row.insertCell(7);
    var Revenue_Check = row.insertCell(8);
    var Payment_Received = row.insertCell(9);
    var Receival_Date = row.insertCell(10);
    var Check = row.insertCell(11);
    var Bank_Deposit = row.insertCell(12);
    var Deposit_Date = row.insertCell(13);
    var Verification = row.insertCell(14);
    var Verification_Date = row.insertCell(15);

    Order_ID.innerHTML = '{{ID}}';
    Order_Date.innerHTML = '{{OrderDate}}';
    Customer_Name.innerHTML = '{{CustomerName}}';
    Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
    Downpayment_Balance.innerHTML = '{{Downpayment}}';
    Order_Delivered.innerHTML = '{{Delivery}}';
    Delivery_Date.innerHTML = '{{DeliveryDate}}';
    Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
    Revenue_Check.innerHTML = '{{RCheck}}';
    Payment_Received.innerHTML = '{{PReceival}}';
    Receival_Date.innerHTML = '{{PaymentDate}}';
    Check.innerHTML = '{{CheckNum}}';
    Bank_Deposit.innerHTML = '{{Deposit}}';
    Deposit_Date.innerHTML = '{{DepositDate}}';
    Verification.innerHTML = '{{Ver}}';
    Verification_Date.innerHTML = '{{VerDate}}';

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

</script>

Answer 1

我尝试使用此代码，它可以工作。请注意，我将大部分代码添加到addRow函数中，并在需要时调用它。尝试这些更改，并告诉我它们是否有效。

<script>
var table = document.getElementById("orders");
if(localStorage.tableData==undefined){localStorage.tableData=table.innerHTML};
table.innerHTML = localStorage.tableData;
function addRow(){
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.tableData=table.innerHTML;
           };
    </script>

将新表行中的数据保存在本地存储中

1 个答案: