从本地存储动态重新填充表行

Posted 2023-02-23

【中文标题】从本地存储动态重新填充表行

【英文标题】：Repopulate table rows dynamically from localstorage

【发布时间】：2018-03-12 12:55:03

【问题描述】：

给定本地存储中的数据（在 STEP 3）填充表行时出现问题。目前我在下面的备注部分中有两个按钮可以添加/删除行，我可以重复使用吗？

但是，下面是我的场景：

STEP 1 默认情况下会有如下所示的表格html代码，用户可以添加新行或删除选定的行。单击保存按钮后，它将数据保存到本地存储中（代码如下）：

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
    <input type="button" value="Add row" onClick="addRow('dyn_table')" />
    <input type="button" value="Remove row" onClick="deleteRow('dyn_table')" />
    <div class="form-group">
        <table class="table" id="dyn_table">
            <tbody><tr><td><input type="checkbox" class="big-checkbox" name="chk[]" checked="checked" /></td>
                    <td>
                        <div class="form-group">
                            <label for="dyn_payment_method">Payment Method</label>
                            <select name="dyn_item_code[]" class="dyn_item_code form-control">
                                <option disabled="" selected="" value=""> -- select an option -- </option>
                                <option value="cash">Cash</option>
                                <option value="cheque">Cheque</option>
                                <option value="tt">TT</option>
                                <option value="cc">Credit Card</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="dyn_amount">Amount</label>
                            <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01">
                        </div>
                        <div class="form-group">
                            <label for="dyn_reference">Reference Number</label>
                            <input type="text" class="dyn_reference" name="dyn_reference[]" class="form-control" >
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <button type="submit" class="btn btn-success" id="btnSave">Save</button>
</div>

<table id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Company</th>
            <th>Invoice No.</th>
            <th>Due Date</th>
            <th>Invoice Amount</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>ABC Inc.</td>
            <td>I0001</td>
            <td>2020-01-01 00:00:00</td>
            <td>USD100</td>
            <td>ACTIVE</td>
            <td><a href="#" data-id="5" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a></td>
        </tr>
    </tbody>
</table>

STEP 2这是将所有行保存到本地存储（setter）的代码

$('#btnSave').on('click', function(e) 
    e.preventDefault();
    var id = $(this).attr("data-id");
    var mykey = 'set'+id;
    var my_table = [];

    $('#dyn_table tr').each(function()
        var tr = $(this);
        var checkbox = $(this).find('.big-checkbox').is(':checked');
        var itemcode = $(this).find('.dyn_item_code :selected').val();
        var amount = $(this).find('.dyn_amount').val();
        var reference = $(this).find('.dyn_reference').val();

        my_table.push([checkbox, itemcode ,amount, reference]);
    );

    localStorage.setItem(mykey, JSON.stringify(my_table));

);

STEP 3 这是从本地存储（getter）中检索数据的代码，但问题是如何重新填充表格行？

$('#edit-modal').on('show.bs.modal', function(e) 
    var id = $(e.relatedTarget).data('id'); //id from edit button
    var mykey = 'set'+id;

    $('#btnSave').attr('data-id' , id);

    if(localStorage.getItem(mykey)==null)
        console.log('key not found');
     else 
        console.log('key found');

        var lsSetFields = JSON.parse(localStorage.getItem(mykey));
        var checkbox,itemcode,amount,reference = '';

        $.each( lsSetFields, function( key, value ) 
            checkbox = value[0];
            itemcode = value[1];
            amount = value[2];
            reference = value[3];

            console.log('checkbox='+checkbox);
            console.log('itemcode='+itemcode);
            console.log('amount='+amount);
            console.log('reference='+reference);

            // I guess must be doing the table re-populating here,
            // Should I remove all rows then repopulate or ???
        );
    
);

备注

function addRow(tableID) 
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) 
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;

    


function deleteRow(tableID) 
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) 
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        console.log(chkbox);
        if(null != chkbox && true == chkbox.checked) 
            if(rowCount <= 1) 
                alert("Please remain minimum ONE row. The last row is now preserved.");
                break;
            
            table.deleteRow(i);
            rowCount--;
            i--;
        
    

【问题讨论】：

由于edit-modal 的代码丢失，您能否提供整个 HTML，或者您可以创建 JSFiddle 来重现该问题？

edit-modal 在 STEP 3 中不是吗？

是的，也是显示模态对话框的按钮。如果您能提供完整的代码以获得好的答案，将会很有帮助。

嗨，我已经包含了一个将触发模式的标签。这些是我正在处理的代码，其他的只是库，如数据表、引导程序、jquery..

【参考方案1】：

您可以按如下方式修改第 3 步，应该可以解决问题。我在下面的代码中更新了 cmets。

$('#edit-modal').on('show.bs.modal', function (e) 
    var id = $(e.relatedTarget).data('id'); //id from edit button
    var mykey = 'set' + id;

    $('#btnSave').attr('data-id', id);

    if (localStorage.getItem(mykey) == null) 
        console.log('key not found');
     else 
        console.log('key found');

        var lsSetFields = JSON.parse(localStorage.getItem(mykey));
        var checkbox, itemcode, amount, reference = '';

        $("#dyn_table tr").not(":first").remove(); //Delete all rows except first

        $.each(lsSetFields, function (key, value) 
            //Clone first row and update input and select fields
            $("#dyn_table tr:first").clone().find("input, select").each(function (index) 
                if (index === 0) $(this).prop("checked", value[index]);
                $(this).val(value[index]);
            ).end().appendTo("#dyn_table");
        );

        //Delete first row
        $("#dyn_table tr:first").remove();
    
);

【讨论】：

嗨，我也有复选框。使用 console.log 我看到该值为真/假。它没有正确设置。如何使其反映正确的复选框？

谢谢。只是一个问题，它如何知道本地存储中的哪个值来填充相应的字段？我确信每一行都会有相同的数据顺序 1:checkbox, 2:select,3:input,4:input。我只想用外行术语知道代码的含义。再次感谢。

由于clone，数据在localstorage中的存储顺序与表行中的字段顺序相同。希望这会有所帮助。