动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table,tr,th,td {
border: 1px solid #000;
}
table {
width: 600px;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<input id="uId" name="uId">
<input id="uName" name="uName">
<input id="uTel" name="uTel">
<button id="btn">保存</button>
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th style="width:250px">电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tab">
</tbody>
</table>
<script>
var oId = document.getElementById("uId");
var oName = document.getElementById("uName");
var oTel = document.getElementById("uTel");
var oTab = document.getElementById("tab");
var oBtn = document.getElementById("btn"); // 定义一个全局变量数组
var globList = [];
oBtn.onclick = function () { // 1\. 点击之后, 把输入框的数, 做成一个对象
var oSaveObj= {
id:oId.value.trim(), // trim去掉前后的留白
name:oName.value.trim(),
tel:oTel.value.trim()
}
// 2\. 把对象里的数据和一个全局数组里的每一个对象, 进行比较
// some every, filter map, forEach for, for..in
var isReg = globList.some(function (el){
// el 表示数组里的每一个对象
return el.id == oSaveObj.id
});
if (isReg == true) {
// 3.已经存在, 提示人家, 已经注册
alert("已注册 ! ");
return; // return 让代码不在继续往下走,到这结束了
} else {
// 4\. 点击之后, 把表格里面, 已有的数据清除
oTab.innerHTML = "";
// 5\. 不存在, 把当前的对象添加到全局数据里
globList.push(oSaveObj);
}
// 6\. 遍历全局数组, 把每一个数据都显示在 页面上表格里
// index 表示数组的下标
// aaa, 就是 globList
globList.forEach(function (el, index, aaa) { // 创建行
var newTr = document.createElement("tr"); // 创建小格子1
var newTd1= document.createElement("td");
newTd1.innerText = el.id;
newTr.appendChild(newTd1); // 创建小格子2
var newTd2 = document.createElement("td");
newTd2.innerText = el.name;
newTr.appendChild(newTd2); // 创建小格子3
var newTd3 = document.createElement("td");
newTd3.innerText = el.tel;
newTr.appendChild(newTd3); // 创建小格子4
var newTd4 = document.createElement("td");
newTd4.innerHTML = "<a href='iavascript:voil(0)' onclick = del(this)>删除</a>";
newTr.appendChild(newTd4);
// href='javascript:void(0)'; 使用href是因为href有跳转的作用,避免页面刷新, 使用javascript:void(0)
// 1). 给a绑定行内点击事件, del里头的this, 表示a标签 this==a
// 2). del() 方法必须是全局的
// 为什么del()要做成全局, 因为函数先定义, 后使用, 再点击之前, 就要让del函数挂载在window对象上
//在当我们点击的时候, 才能找到del
// 最后把newTr 挂到表格里
oTab.appendChild(newTr);
})
}
// 全局的del函数
function del(obj) {
if(confirm("您确定删除吗 ? ")) {
// 1\. 先删除数组
// 再删除之前, 先通过a-->td-->tr, 再又从tr里找到第一个小格子(td)
var oFirst = obj.parentNode.parentNode.firstElementChild || obj.parentNode.parentNode.firstChild;
var tmpId=oFirst.innerText.trim();
globList.forEach(function (el, index) {
if (el.id == tmpId) {
globList.splice(index, 1);
}
})
// 2\. 才能删除视觉效果(页面)
// a-->td-->tr.删除 这就删除一行
obj.parentNode.parentNode.remove();
//用for循环
// for (var i =0; i<globList.length;i++) {
// if(globList[i].id==tmpId) {
// globList.splice(i, 1)
// }
// }
}
}
</script>
</body>
</html>
