Question

我是JavaScript的绝对初学者。我试图制作一个表，可以保存我键入的内容。我刚得到与我想要的相反的表，每次我刷新网站时表都会删除内容。

基本上，我的问题是我必须更改什么，以便我可以永久保存数据，并且每次刷新网页时它都不会消失。也很高兴知道我做错了。我已经尝试过更改某些东西，但是情况变得更糟

以下是一些适合您的示例代码：

JS：

    $(document).ready(function () {
    var counter = 0;

    $("#addrow").on("click", function () {
        var newRow = $("<tr>");
        var cols = "";

        cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
        cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
        counter++;
    });



    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();       
        counter -= 1
    });


});



function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="price"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

基本HTML：

<div class="container">
<table id="myTable" class=" table order-list">
<thead>
    <tr>
        <td>name</td>
        <td>mail</td>
        <td>phone</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="col-sm-4">
            <input type="text" name="name" class="form-control" />
        </td>
        <td class="col-sm-4">
            <input type="mail" name="mail"  class="form-control"/>
        </td>
        <td class="col-sm-3">
            <input type="text" name="phone"  class="form-control"/>
        </td>
        <td class="col-sm-2"><a class="deleteRow"></a>

        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: left;">
            <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
        </td>
    </tr>
    <tr>
    </tr>
</tfoot>

Answer 1

您可以使用indexOutOfBoundException对象，该对象存储没有到期日期的数据。刷新页面甚至关闭浏览器时，这些数据都不会删除。为此，您首先需要创建将数据保存到localStorage中的函数。

localStorage

此函数遍历所有表单元格并将其内容保存到function save_data(){ let table_data = [] $('.form-control').each(function() { table_data.push( $(this).val() )}); localStorage.setItem('table_data', JSON.stringify(table_data)); }数组中。然后将table_data数组与table_data转换为String并保存在JSON.stringify中。每次添加，删除或编辑其中一行时，都应执行此功能。为此，我们需要创建新的事件处理程序：

localStorage

每次创建或删除一行时，第一个触发$('tbody').on("DOMSubtreeModified", function() {save_data()}); $('tbody').on('change', '.form-control', function() {save_data()});函数。每当修改表的内容时，第二个保存数据。

我们还需要一个用于从save_data加载数据的功能：

localStorage

此函数使用function load_data(){ let table_data = JSON.parse(localStorage.getItem('table_data')); for (i = 1; i < table_data.length/3; i++) $("#addrow").click() $('.form-control').each(function(index) {$(this).val(table_data[index])}); }函数从localStorage加载数据。加载的数据为getItem，因此使用String将其转换为数组。接下来，根据JSON.parse数组的大小插入新行。最后，它遍历所有表单元格并用加载的数据填充它们。仅当页面加载后且table_data中存在数据时，才应执行此函数。最好的方法是将此行放在localStorage函数的底部：

ready

如何永久保存表格内容

1 个答案: