【发布时间】：2015-04-23 05:28:23
【问题描述】：
我正在制定待办事项清单。我正在尝试为添加到窗口的每一行创建一个“deleteThis”函数。到目前为止，我可以保存、清除（表单）和清除（存储）。但我也希望能够通过在每行末尾添加一个 td 来删除单个行。结果应该有效，以便用户可以单击 X 以从本地存储中删除该行。
HTML/CSS
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Local Storage</title>
<style>
body {
background:#999;
overflow:hidden;
}
.c1 {
font-family: 'Open Sans', sans-serif;
font-weight:800;
font-size:120%;
border:none;
border-radius:3.33%;
padding:24px 5px;
width:600px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-moz-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset;
-webkit-background-clip: padding-box;
outline: 0;
}
#tbl {
background:#F9FBFF;
padding:8px 7px;
border-radius:2%;
}
:focus {
outline:0;
}
#tableRNDR {
background:#F9FBFF;
border-radius:2%;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:110%;
margin:auto;
position:relative;
width:700px;
overflow:hidden;
}
th, td {
padding:18px 24px;
}
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
color: #666;
height: 12px;
position: relative;
width: 12px;
}
input[type="time"]::-webkit-clear-button {
display: none;
}
#wrapper {
width:700px;
font-size:150%;
margin:auto;
}
#btnWrapper {
margin:auto;
width:400px;
}
.btnsC {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#f9f9f9;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
cursor:pointer;
color:#666666;
font-family: 'Open Sans', sans-serif;
font-weight:600;
font-size:17px;
padding:6px 24px;
text-shadow:0px 1px 0px #ffffff;
}
.btnsC:hover {
background-color:#e9e9e9;
}
.btnsC:active {
position:relative;
top:2px;
}
</style>
</head>
<body>
<div>Ehawk's Planner V2.3</div>
<div id="wrapper">
<table style="width:100%;" id="tbl">
<tbody><tr>
<td>
<input id="txtpname" type="text" class="c1" placeholder="Name" />
</td>
</tr>
<tr>
<td>
<input id="txtpaddr" class="c1" placeholder="Description" />
</td>
</tr>
<tr>
<td>
<input id="txtpcity" type="time" class="c1" placeholder="Time" />
</td>
</tr>
<tr>
<td>
<input id="txtpemil" type="date" class="c1" placeholder="Date" />
</td>
</tr>
</tbody></table>
<br>
<div id="btnWrapper">
<input id="btnsave" class="btnsC" type="button" value="Save">
<input id="btnclear" class="btnsC" type="button" value="Clear">
<input id="btnclearstorage" class="btnsC" type="button" value="Clear Storage">
</div>
<div id="dvcontainer"><br>
</div>
</div>
</body></html>
Javascript
<script>
(function () {
//Goals Object
var Goals = {
Name: "",
Descript: "",
timeVal:"",
dateVal: ""
};
var Uilogic = {
//Clear all
clearuielements: function () {
var inputs = document.getElementsByClassName("c1");
for (i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
},
//Save to LS
saveitem: function () {
var lscount = localStorage.length; //Length
var inputs = document.getElementsByClassName("c1");
Goals.Name = inputs[0].value;
Goals.Descript = inputs[1].value;
Goals.timeVal = inputs[2].value;
Goals.dateVal = inputs[3].value;
//Convert to JSON/Store it
localStorage.setItem("Goals_" + lscount, JSON.stringify(Goals));
location.reload();
},
//Load Data from LS
loaddata: function () {
var datacount = localStorage.length;
if (datacount > 0)
{
var renderData = "<table id='tableRNDR'>";
renderData += "<br /><tr><th>Id</th><th>Name</th><th>Description</th> <th>Time</th><th>Date</th><th></th></tr>";
for (i = 0; i < datacount; i++) {
var key = localStorage.key(i); //Get Key
var Goals = localStorage.getItem(key); //Get Data
var data = JSON.parse(Goals); //Parse Data
var iCount = i + 1;
renderData += "<tr><td>" + iCount + "</td><td>" + data.Name + " </td>";
renderData += "<td>" + data.Descript + "</td>";
renderData += "<td>" + data.timeVal + "</td>";
renderData += "<td>" + data.dateVal + "</td>";
renderData += "<td id='xData'>" + "⊠" + "</td>";
}
renderData+="</table>";
dvcontainer.innerHTML = renderData;
}
},
//Clear
clearstorage: function () {
var storagecount = localStorage.length; //Count
if (storagecount > 0)
{
for (i = 0; i < storagecount; i++) {
localStorage.clear();
}
}
window.location.reload();
}
};
//deleteThis
//Save
var btnsave = document.getElementById('btnsave');
btnsave.addEventListener('click', Uilogic.saveitem, false);
//Clear all
var btnclear = document.getElementById('btnclear');
btnclear.addEventListener('click', Uilogic.clearuielements, false);
//Clear LS
var btnclearstorage = document.getElementById('btnclearstorage');
btnclearstorage.addEventListener('click', Uilogic.clearstorage, false);
//Onload
window.onload = function () {
Uilogic.loaddata();
};
})();
</script>
【问题讨论】：
标签： javascript json html local-storage event-listener