<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 50px auto;
}
.box ul{
list-style: none;
}
.box ul li{
height: 40px;
line-height: 40px;
border: 1px solid #b0b0b0;
margin-top: 10px;
padding-left: 10px;
}
.box ul li span{
float: right;
padding: 0 5px;
font-size: 12px;
color: #fff;
height: 26px;
line-height: 26px;
margin-top: 7px;
margin-right: 10px;
}
.box ul li span.update{
background-color: peru;
}
.box ul li span.delete{
background-color: lightcoral;
}
#addBtn{
height: 30px;
background-color: lightgreen;
line-height: 30px;
text-align: center;
margin-top: 20px;
color: #fff;
}
</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>
<li>芒果<span class="update">修改</span><span class="delete">删除</span></li>
</ul>
<div id="addBtn">添加一项</div>
</div>
<script>
var add = document.getElementById('addBtn');
var ul = document.getElementsByTagName('ul')[0];
//添加
add.onclick = function () {
var res= prompt('请输入要添加的内容?');
if(res){
var li = document.createElement('li');//创建元素节点
li.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
ul.appendChild(li);//添加元素
}
};
//事件冒泡:事件发生时,事件发生的元素的祖先元素也可以被触发该事件
//事件委托:利用事件冒泡的机制,把事件绑定给祖先元素,事件发生时通过判断事件源的具体信息做相应的处理
ul.onclick = function (event) {
event = event || window.event; //处理ie低版本的兼容
var tar = event.target || event.srcElement;//处理事件源的兼容性
if(tar.innerHTML ==='删除'){
if(confirm('确定要删除吗?')){
tar.parentNode.parentNode.removeChild(tar.parentNode);//删除元素
}
}else if(tar.innerHTML ==='修改'){
var res= prompt('请输入要修改的内容?');
if(res){
var li = document.createElement('li');
li.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
tar.parentNode.parentNode.replaceChild(li,tar.parentNode);//替换,新的在前
}
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 50px auto;
}
.box ul{
list-style: none;
}
.box ul li{
height: 40px;
line-height: 40px;
border: 1px solid #b0b0b0;
margin-top: 10px;
padding-left: 10px;
}
.box ul li span{
float: right;
padding: 0 5px;
font-size: 12px;
color: #fff;
height: 26px;
line-height: 26px;
margin-top: 7px;
margin-right: 10px;
}
.box ul li span.update{
background-color: peru;
}
.box ul li span.delete{
background-color: lightcoral;
}
#addBtn{
height: 30px;
background-color: lightgreen;
line-height: 30px;
text-align: center;
margin-top: 20px;
color: #fff;
}
</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>
<li>芒果<span class="update">修改</span><span class="delete">删除</span></li>
</ul>
<div id="addBtn">添加一项</div>
</div>
<script>
var add = document.getElementById('addBtn');
var ul = document.getElementsByTagName('ul')[0];
//添加
add.onclick = function () {
var res= prompt('请输入要添加的内容?');
if(res){
var li = document.createElement('li');//创建元素节点
li.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
ul.appendChild(li);//添加元素
}
};
//事件冒泡:事件发生时,事件发生的元素的祖先元素也可以被触发该事件
//事件委托:利用事件冒泡的机制,把事件绑定给祖先元素,事件发生时通过判断事件源的具体信息做相应的处理
ul.onclick = function (event) {
event = event || window.event; //处理ie低版本的兼容
var tar = event.target || event.srcElement;//处理事件源的兼容性
if(tar.innerHTML ==='删除'){
if(confirm('确定要删除吗?')){
tar.parentNode.parentNode.removeChild(tar.parentNode);//删除元素
}
}else if(tar.innerHTML ==='修改'){
var res= prompt('请输入要修改的内容?');
if(res){
var li = document.createElement('li');
li.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
tar.parentNode.parentNode.replaceChild(li,tar.parentNode);//替换,新的在前
}
}
}
</script>
</body>
</html>