<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>王五</td>
<td>21</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>赵六</td>
<td>27</td>
<td><button>删除</button></td>
</tr>
</table>
<input type="text" placeholder="请输入姓名">
<input type="text" placeholder="请输入年龄">
<button id="btn">提交</button>
<script type="text/javascript">
window.onload = function () {
var inputNodes = document.querySelectorAll('input');
var btn = document.querySelector('#btn');
var tBodyNode = document.querySelector('table>tbody');
// 获取删除按钮集合
var delBtns = document.querySelectorAll('table button');
// 给提交按钮绑定单击事件 当用户点击按钮时 获取两个输入框的内容 且去除空格之后不能为空
btn.onclick = function () {
// 获取两个输入框的内容
var contentName = inputNodes[0].value;
var contentAge = inputNodes[1].value;
if(contentName.trim() && contentAge.trim()){
// alert('创建');
// <tr>
// <td>张岩</td>
// <td>3</td>
// <td><button>删除</button></td>
// </tr>
// 创建当前行的tr元素
var trNode = document.createElement('tr');
// 创建名字的td
var tdName = document.createElement('td');
// 将第一个输入框的内容 作为文本 设置给当前的td
tdName.innerHTML = contentName;
// 将处理好的td 添加到tr当中
trNode.appendChild(tdName);
var tdAge = document.createElement('td');
tdAge.innerHTML = contentAge;
trNode.appendChild(tdAge);
var tdBtn = document.createElement('td');
var delBtn = document.createElement('button');
delBtn.innerHTML = '删除';
tdBtn.appendChild(delBtn);
trNode.appendChild(tdBtn);
// 代码执行到此处 trNode 当中就是处理好的要添加到页面的结构 追加到table当中即可
console.log(trNode)
tBodyNode.appendChild(trNode);
}else{
alert('请不要输入空信息')
}
inputNodes[0].value = inputNodes[1].value = '';
}
// 循环事件绑定
for (var i = 0; i < delBtns.length; i++) {
delBtns[i].onclick = function () {
// 根据当前点击的删除按钮 找到其对应的行元素 tr
var nowTr = this.parentNode.parentNode;
// 获取当前行的 第一个子元素的文本 作为提示信息
var name = nowTr.firstElementChild.innerHTML;
// console.log(name)
// confirm 确认框 可传递一个参数 类型为字符串 作用为 确认框的提示信息
// 确认框包含两个按钮 确定和取消 点击确定按钮 则方法返回true 点击取消按钮则方法返回false
// 所以通常情况下 我们将confirm 和if 结合在一起使用 将confirm的调用 写在if的判断条件当中
if(confirm('你确定要删除'+ name +'的信息吗？')){
// 用户点击了确定按钮 confirm返回值为true 才会进入到这个if当中 我们需要执行删除当前tr的逻辑
tBodyNode.removeChild(nowTr);
}else{
alert('你取消了这个操作')
}
}
}
// 作业 1：将当前删除逻辑 使用事件委托实现
// 2：dom2级事件的兼容解绑
}
</script>
</body>
</html>
