不使用事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
.caozuo {
width: 500px;
margin: 0 auto;
height: 20px;
display: flex;
}
.caixi {
flex: 2;
min-width: 0;
}
.caiming {
flex: 2;
min-width: 0;
}
.jiage {
flex: 1;
min-width: 0;
}
.tianjia {
flex: 1;
min-width: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>大菜</td>
<td>鱼香肉丝1</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝2</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝3</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝4</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝5</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
<div class="caozuo">
<input class="caixi">
<input class="caiming">
<input class="jiage">
<input class="tianjia" type="button" value="添加">
</div>
<script>
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
var tbody = this.parentNode.parentNode.parentNode;
var tr = this.parentNode.parentNode;
console.log(tbody.removeChild(tr))
}
}
var addBtn = document.querySelector("input[type=button]");
console.log(addBtn);
var caixi = document.querySelector(".caixi")
var caiming = document.querySelector(".caiming")
var jiage = document.querySelector(".jiage")
var tbody = document.querySelector("tbody");
addBtn.onclick = function () {
var tr = document.createElement('tr');
tr.innerHTML =
[
"<td>" + caixi.value + "</td>",
"<td>" + caiming.value + "</td>",
"<td>" + jiage.value + "</td>",
"<td>" + "<button>删除</button>" + "</td>",
].join('');
tbody.appendChild(tr);
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
var tbody = this.parentNode.parentNode.parentNode;
var tr = this.parentNode.parentNode;
console.log(tbody.removeChild(tr))
}
}
}
</script>
</body>
</html>
使用事件代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
.caozuo {
width: 500px;
margin: 0 auto;
height: 20px;
display: flex;
}
.caixi {
flex: 2;
min-width: 0;
}
.caiming {
flex: 2;
min-width: 0;
}
.jiage {
flex: 1;
min-width: 0;
}
.tianjia {
flex: 1;
min-width: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>大菜</td>
<td>鱼香肉丝1</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝2</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝3</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝4</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>大菜</td>
<td>鱼香肉丝5</td>
<td>10</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
<div class="caozuo">
<input class="caixi">
<input class="caiming">
<input class="jiage">
<input class="tianjia" type="button" value="添加">
</div>
<script>
var addBtn = document.querySelector("input[type=button]");
var caixi = document.querySelector(".caixi")
var caiming = document.querySelector(".caiming")
var jiage = document.querySelector(".jiage")
var tbody = document.querySelector("tbody");
addBtn.onclick = function () {
var tr = document.createElement('tr');
tr.innerHTML =
[
"<td>" + caixi.value + "</td>",
"<td>" + caiming.value + "</td>",
"<td>" + jiage.value + "</td>",
"<td>" + "<button>删除</button>" + "</td>",
].join('');
tbody.appendChild(tr);
}
var tbody = document.querySelector("tbody");
tbody.onclick = function(e) {
if (e.target.tagName.toLowerCase() === "button") {
var tr = e.target.parentNode.parentNode;
tbody.removeChild(tr)
}
}
</script>
</body>
</html>
事件代理拓展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 500px;
margin: 0 auto;
text-align: center;
}
.caozuo {
width: 500px;
margin: 0 auto;
height: 20px;
display: flex;
}
.caixi {
flex: 2;
min-width: 0;
}
.caiming {
flex: 2;
min-width: 0;
}
.jiage {
flex: 1;
min-width: 0;
}
.tianjia {
flex: 1;
min-width: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>菜系</th>
<th>菜名</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="caozuo">
<input class="caixi" id="caixi">
<input class="caiming" id="caiming">
<input class="jiage" id="jiage">
<input class="tianjia" id='addBtn' type="button" value="添加">
</div>
<script>
var caixi = document.getElementById("caixi");
var caiming = document.getElementById("caiming");
var jiage = document.getElementById("jiage");
var addBtn = document.getElementById("addBtn");
addBtn.onclick = function() {
var cx = caixi.value;
var cm = caiming.value;
var jg = jiage.value;
var obj = {
type_id: 3,
name: cx,
food: [{
food_id: 6,
name: cm,
price: jg
}]
}
arr.push(obj);
render();
}
var arr = [{
type_id: 1,
name: "大菜",
food: [{
food_id: 1,
name: "鱼香肉丝",
price: 10
},
{
food_id: 2,
name: "红烧肉",
price: 10
},
{
food_id: 3,
name: "香辣粉",
price: 10
}
]
}, {
type_id: 2,
name: "中菜",
food: [{
food_id: 4,
name: "小炒肉",
price: 13
}, {
food_id: 5,
name: "云吞",
price: 14
}]
}, {
type_id: 3,
name: '小菜',
food: [{
food_id: 6,
name: "雪糕",
price: 15
}, {
food_id: 7,
name: "黄瓜",
price: 16
}]
}]
var tbody = document.querySelector("tbody");
function render() {
var str = '';
for (var j = 0; j < arr.length; j++) {
var obj = arr[j];
var food = obj.food;
for (var i = 0; i < food.length; i++) {
str += ["<tr>",
"<td>" + obj.name + "</td>",
"<td>" + food[i].name + "</td>",
"<td>" + food[i].price + "</td>",
"<td>" + "<button data-foodname=" + food[i].name + " data-name=" + obj.name + ">删除</button>" + "</td>",
"</tr>"
].join("");
}
}
tbody.innerHTML = str;
}
render();
tbody.onclick = function(e) {
if (e.target.tagName.toLowerCase() === "button") {
var name = e.target.getAttribute("data-name");
var foodname = e.target.getAttribute("data-foodname");
var obj = null;
for (var i = 0; i < arr.length; i++) {
if (arr[i].name === name) {
obj = arr[i];
break;
}
}
var foodArr = obj.food;
var foodObjIdx = 0;
for (var i = 0; i < foodArr.length; i++) {
if (foodArr[i].name === foodname) {
foodObjIdx = i;
break;
}
}
foodArr.splice(foodObjIdx, 1);
render();
}
}
</script>
</body>
</html>