前端的CRUD增刪改查的小例子
1.效果演示
2.相關代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
ul li{
height: 50px;
border: 1px solid #b0b0b0;
margin-top: 10px;
line-height: 50px;
padding-left: 10px;
}
ul li span{
float: right;
height: 30px;
margin-top: 10px;
color: #fff;
line-height: 30px;
font-size: 12px;
padding: 0 10px;
}
ul li span.update{
background-color: purple;
margin:10px 20px;
}
ul li span.delete{
background-color: red;
}
.addBtn{
height: 50px;
background-color: green;
color: #fff;
text-align: center;
line-height: 50px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>蘋果 <span class="update">修改</span><span class="delete">刪除</span></li>
<li>榴蓮 <span class="update">修改</span><span class="delete">刪除</span></li>
<li>橘子 <span class="update">修改</span><span class="delete">刪除</span></li>
<li>香蕉 <span class="update">修改</span><span class="delete">刪除</span></li>
<li>西瓜 <span class="update">修改</span><span class="delete">刪除</span></li>
</ul>
<div class="addBtn" id="addBtn">添加一項</div>
</div>
<script>
var addBtn = document.getElementById('addBtn');
var oUl = document.getElementsByTagName('ul')[0];
var upds = document.getElementsByClassName('update');
var dels = document.getElementsByClassName('delete');
addBtn.onclick = function () {
var res = prompt('請輸入要添加的內容');//'aa' '' null
if(res){
var oLi = document.createElement('li');
oLi.innerHTML = res+'<span class="update">修改</span><span class="delete">刪除</span>';
oUl.appendChild(oLi);
}
};
//修改
/* for(var i = 0; i < upds.length; i++){
upds[i].onclick = function () {
var res = prompt('請輸入修改的內容');
if(res){
var oLi = document.createElement('li');
oLi.innerHTML = res+'<span class="update">修改</span><span class="delete">刪除</span>';
this.parentNode.parentNode.replaceChild(oLi,this.parentNode);
}
}
}
//刪除
for (var i = 0; i < dels.length; i++){
dels[i].onclick = function () {
if(confirm('確定要刪除該項嗎？')){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}
}*/
//事件委托：利用事件冒泡的機制，將事件綁定給祖先元素，事件發生的時候通過判斷事件源的具體信息來做相應的操作
oUl.onclick = function (event) {//event事件對象
event = event || window.event;//處理ie下兼容性
var tar = event.target||event.srcElement; //事件源
console.log(tar);
if(tar.innerHTML === '修改'){
var res = prompt('請輸入修改的內容');
if(res){
var oLi = document.createElement('li');
oLi.innerHTML = res+'<span class="update">修改</span><span class="delete">刪除</span>';
oUl.replaceChild(oLi,tar.parentNode);
}
}
if(tar.innerHTML === '刪除'){
if(confirm('確定要刪除該項嗎？')){
oUl.removeChild(tar.parentNode);
}
}
}
</script>
</body>
</html>
