javascript - trouble with delete user input -
i'm trying make array saves local storage , user can sort items, add item, delete item, , clear local storage. i'm having lot of trouble getting delete or splice user input work can please provide me advice.
this code have far please forgive me if it's bad, keen know how can made better.
... <script> //lets program know books1 variable array var books1 = [] //lets program know result variable string var result = "" //checks see if localstorage key booksarray exists, if doesn't books1 has 3 books added ans stored locally key of booksarray if (localstorage.getitem("booksarray") == null) { books1 = ["book1", "book2", "book3", "m", "p"] localstorage.setitem("booksarray", json.stringify(books1)) // var thearray = json.parse("booksarray") } else { loadbooks(); //loads books array variable name listbooks } function loadbooks() { var result = localstorage.getitem("booksarray") var listbooks = json.parse(result) } function sortbooks() { var sortedbooks1 = localstorage.getitem("booksarray") var sortedbooks2 = json.parse(sortedbooks1) // loadbooks may work haven't got yet. try redoing project on books array 2.2 sortedbooks2.sort() document.getelementbyid("display1").innerhtml = sortedbooks2 localstorage.setitem("booksarray",json.stringify(sortedbooks2)) } function addbook() { var test1 = localstorage.getitem("booksarray") var addedbook = document.getelementbyid("inputdata").value var addedbook2 = json.parse(test1) addedbook2.push(addedbook) document.getelementbyid("display1").innerhtml = addedbook2 localstorage.setitem("booksarray", json.stringify(addedbook2)) } function delbook() { //if (document.getelementbyid("inputdata").value.length > 0) { var local = localstorage.getitem("booksarray") var delitem = document.getelementbyid("inputdata").value var array = json.parse(local) var x = array.indexof(delitem); //test2.splice(delitem,1) if (delitem != -1) { delete booksarray[delitem] } document.getelementbyid("display1").innerhtml = test2 } // test function /* function displaybooks() { var test1 = localstorage.getitem("booksarray") var test2 = json.parse(test1) document.getelementbyid("display1").innerhtml = test2[2] } */ function clearlocal() { localstorage.clear() } </script> ... <body> <!--i need make page onload displays books---> <form> <input type="text" id="inputdata" /> </form> <input type="button" onclick="delbook()" value="delete books" /> <input type="button" onclick="sortbooks()" value="test me" /> <input type="button" onclick="addbook()" value="add book" /> <input type="button" onclick="clearlocal()" value="clear local storage" /> <p id="display1"></p> </body> </html>
you can try code crud operation json data
$(function(){ var operation = "a"; //"a"=adding; "e"=editing var selected_index = -1; //index of selected list item var tbclients = localstorage.getitem("tbclients");//retrieve stored data tbclients = json.parse(tbclients); //converts string object if(tbclients == null) //if there no data, initialize empty array tbclients = []; function add(){ var client = json.stringify({ id : $("#txtid").val(), name : $("#txtname").val(), phone : $("#txtphone").val(), email : $("#txtemail").val() }); tbclients.push(client); localstorage.setitem("tbclients", json.stringify(tbclients)); alert("the data saved."); return true; } function edit(){ tbclients[selected_index] = json.stringify({ id : $("#txtid").val(), name : $("#txtname").val(), phone : $("#txtphone").val(), email : $("#txtemail").val() });//alter selected item on table localstorage.setitem("tbclients", json.stringify(tbclients)); alert("the data edited.") operation = "a"; //return default value return true; } function delete(){ tbclients.splice(selected_index, 1); localstorage.setitem("tbclients", json.stringify(tbclients)); alert("client deleted."); } function list(){ $("#tbllist").html(""); $("#tbllist").html( "<thead>"+ " <tr>"+ " <th></th>"+ " <th>id</th>"+ " <th>name</th>"+ " <th>phone</th>"+ " <th>email</th>"+ " </tr>"+ "</thead>"+ "<tbody>"+ "</tbody>" ); for(var in tbclients){ var cli = json.parse(tbclients[i]); $("#tbllist tbody").append("<tr>"+ " <td><img src='edit.png' alt='edit"+i+"' class='btnedit'/><img src='delete.png' alt='delete"+i+"' class='btndelete'/></td>" + " <td>"+cli.id+"</td>" + " <td>"+cli.name+"</td>" + " <td>"+cli.phone+"</td>" + " <td>"+cli.email+"</td>" + "</tr>"); } } $("#frmcadastre").bind("submit",function(){ if(operation == "a") return add(); else return edit(); }); list(); $(".btnedit").bind("click", function(){ operation = "e"; selected_index = parseint($(this).attr("alt").replace("edit", "")); var cli = json.parse(tbclients[selected_index]); $("#txtid").val(cli.id); $("#txtname").val(cli.name); $("#txtphone").val(cli.phone); $("#txtemail").val(cli.email); $("#txtid").attr("readonly","readonly"); $("#txtname").focus(); }); $(".btndelete").bind("click", function(){ selected_index = parseint($(this).attr("alt").replace("delete", "")); delete(); list(); }); }); body{ font-family:tahoma; } ul{ list-style:none; } ul label{ width:100px; float:left; } #frmcadastre{ border:solid 1px; } #tbllist{ width:100%; border:solid 1px; text-align:left; border-collapse:collapse; } #tbllist tbody tr{ border:solid 1px; height:30px; } #tbllist thead{ background:beige; } <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> </head> <body> <form id="frmcadastre"> <ul> <li> <label for="txtid">id:</label> <input type="text" id="txtid"/> </li> <li> <label for="txtname">name:</label> <input type="text" id="txtname"/> </li> <li> <label for="txtphone">phone:</label> <input type="text" id="txtphone"/> </li> <li> <label for="txtemail">email:</label> <input type="text" id="txtemail"/> </li> <li> <input type="submit" value="save" id="btnsave"/> </li> </ul> </form> <table id="tbllist"> </table> </body> </html>
Comments
Post a Comment