Question

我目前正在使用jquery将localStorage中的JSON数组显示到表中。 JSON数组中的字段是：

name,emailId,phoneNo,category

现在我在表格中显示了一个复选框，其名称为类别，值为phoneNo。现在，当我选中复选框并单击删除时，其代码如下：

$('#DeleteButton').click(function(){

        $('input:checkbox[name='+categorySelected+']').each(function() 
                {    
                    if($(this).is(':checked'))
                        {
                        var valueOfCheckbox=$(this).val();


                        var getUserDetails=JSON.parse(localStorage.getItem("userDetails"));

                        for(i=0;i<getUserDetails.length;i++)
                            {
                            if(getUserDetails[i].phoneNo==valueOfCheckbox)
                                {
                                getUserDetails[i].category="";
                                }
                            }


                        }
                    localStorage.setItem("userDetails", JSON.stringify(getUserDetails));
                    $('#insertData').append(displayItems);

                });

    });

我按类别显示数据，因此如果没有类别以便不显示数据，那么在上面的代码中我将特定记录的类别设置为＆＃34;＆＃34; 。运行上面的代码后，localStorage中的数据变为未定义。

我的HTML数据是：

<table id="insertData"  cellspacing="3">
</table>

我正在创建这样的表：

var displayItems="";

    var getItemsFromStorage=localStorage.getItem("userDetails");
    var getCategory=localStorage.getItem("category");

    if(getItemsFromStorage!=null)
        {

        var getItemsFromStorageJSON=JSON.parse(getItemsFromStorage);

        var i;
        for( i=0;i<getItemsFromStorageJSON.length;i++)
            {
            if((getItemsFromStorageJSON[i].category)==getCategory)
                {

                displayItems+="<tr><td><input type='checkbox' name='"+getItemsFromStorageJSON[i].category+"' value='"+getItemsFromStorageJSON[i].phoneNo+"'/></td><td>"+getItemsFromStorageJSON[i].name+"</td><td>"+getItemsFromStorageJSON[i].emailId+"</td><td>"+getItemsFromStorageJSON[i].phoneNo+"</td>"

                }


            }
        $('#insertData').append(displayItems);
        }

另外我应该如何更新表格，因为我最后使用了追加功能，所以它最后附加了数据，导致重复。如何解决这个问题？

我在localStorage中的数据是这样的：

[{"name":"s","emailId":"s@s.com","phoneNo":"9044265063","category":"astrologer"},{"name":"m","emailId":"mishra@yahoo.com","phoneNo":"8050005972","category":"astrologer"}]

我的完整HTML数据是：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="displayItemsJS.js"></script>

<link rel="stylesheet" type="text/css" href="HomeStyle.css">

</head>
<body>

<div class="containerDisplayItems">

<table class="ButtonDisplayItems">

<tr id="rowForButtons">

<td class="buttonsOper">
<input type="button" value="Add" id="AddButton"/> 
</td>

<td class="buttonsOper">
<input type="button" value="Delete" id="DeleteButton"/> 
</td>

</tr>
</table>
<table id="insertData"  cellspacing="3">
</table>
</div>

</body>
</html>

我的完整javascript页面是：

/ ** * * /

$(document).ready(function(){

    var categorySelected=localStorage.getItem("category");

    $('#AddButton').attr('value','Add '+categorySelected);
    $('#DeleteButton').attr('value','Delete '+categorySelected);


    $('#AddButton').click(function(){

        $('.contentPart').load('addCategoryItem.html');
    });


    $('#DeleteButton').click(function(){

        $('input:checkbox[name='+categorySelected+']').each(function() 
                {    
                    if($(this).is(':checked'))
                        {
                        var valueOfCheckbox=$(this).val();


                        var getUserDetails=JSON.parse(localStorage.getItem("userDetails"));

                        for(i=0;i<getUserDetails.length;i++)
                            {
                            if(getUserDetails[i].phoneNo==valueOfCheckbox)
                                {
                                getUserDetails[i].category="";
                                }
                            }

                        }
                    localStorage.setItem("userDetails", JSON.stringify(getUserDetails));
                    $('#insertData').append(displayItems);

                });

    });

    var displayItems="";
    var getItemsFromStorage=localStorage.getItem("userDetails");
    var getCategory=localStorage.getItem("category");
    if(getItemsFromStorage!=null)
        {
        var getItemsFromStorageJSON=JSON.parse(getItemsFromStorage);
        var i;
        for( i=0;i<getItemsFromStorageJSON.length;i++)
            {
            if((getItemsFromStorageJSON[i].category)==getCategory)
                {

                displayItems+="<tr><td><input type='checkbox' name='"+getItemsFromStorageJSON[i].category+"' value='"+getItemsFromStorageJSON[i].phoneNo+"'/></td><td>"+getItemsFromStorageJSON[i].name+"</td><td>"+getItemsFromStorageJSON[i].emailId+"</td><td>"+getItemsFromStorageJSON[i].phoneNo+"</td>"
                }

            }
        $('#insertData').append(displayItems);
        }

});

JSON数组数据未从localStorage

0 个答案: