前端的CRUD增刪改查的小例子
阿新 • • 發佈：2018-09-27
http 輸入 發生 對象 head 元素 nts set char
前端的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>
前端的CRUD增刪改查的小例子