<style>
table{
border-collapse: collapse;
}
table td{
width: 100px;
line-height: 30px;
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
姓名: <input type="text"><br>
年龄: <input type="number" min="18" max="250"><br>
姓名: 男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"> <br>
城市: <select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
</select><br>
<button name="add">添加</button>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>城市</td>
<td>删除</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 事件委托,多用于 动态 添加的标签
// table表格中 所有的tbody 中的内容,都是动态,根据arr数组内容,生成的
// 此时使用事件委托,就特别使用
var arr = [
{name:'张三',age:18,sex:'男',city:'北京'},
{name:'李四',age:19,sex:'女',city:'上海'},
{name:'王五',age:20,sex:'男',city:'广州'},
{name:'赵六',age:21,sex:'女',city:'重庆'},
{name:'刘七',age:22,sex:'保密',city:'天津'},
];
// 获取tbody标签对象
var oTb = document.querySelector('tbody');
// 获取添加button按钮对象
var oBtnAdd = document.querySelector('[name="add"]');
// 调用生成页面函数
setTab();
// 新增数据操作
oBtnAdd.onclick = function(){
// 1,获取数据
var oIptName = document.querySelector('[type="text"]').value;
var oIptAge = document.querySelector('[type="number"]').value;
var oIptCity = document.querySelector('select').value;
var oIptSex = document.querySelectorAll('[type="radio"]');
var oIptSexValue = 0;
oIptSex.forEach(function(item){
if(item.checked === true){
oIptSexValue = item.value;
}
});
// 2,创建对象
var obj = {
name:oIptName,
age:oIptAge,
sex:oIptSexValue,
city:oIptCity,
}
// 3,将对象,写入数据
arr.push(obj);
// 4,根据新的数据,重新渲染生成新的table表格
setTab();
}
// 渲染页面函数
function setTab(){
// 定义空字符串
var str = '';
// 循环遍历数组,生成页面内容字符串
arr.forEach(function(item , key){
// 拼接tr起始标签
str += '<tr>';
// 拼接序号单元格
str += `<td>${key+1}</td>`;
// 循环对象,拼接生成内容单元格
for(var k in item){
str += `<td>${item[k]}</td>`;
}
// 拼接删除单元格
str += `<td><button index="${key}">删除</button></td>`;
// 拼接tr结束标签
str += '</tr>';
})
// 将生成的字符串内容,写入tbody标签
oTb.innerHTML = str;
}
// 给动态生成的标签中,给button按钮,添加事件
// 使用事件委托的形式,给button按钮的父级标签添加事件
// 给一直存在的标签,不是动态生成父级标签,添加事件 ---> tbody
oTb.onclick = function(e){
// 获取事件对象,兼容
e = e || window.event;
// 获取事件对象触发目标,兼容
// eTag就是我们点击的标签
var eTag = e.target || e.srcElement;
// 判断点击的对象是button按钮 -- 标签名称就行,注意必须都大写
if(eTag.tagName == 'BUTTON'){
// 这里的思路和步骤,与 之前 del() 函数中定义的步骤思路完全一致
// 只是之前的标签对象是存储在item中,现在是eTag中
// 获取点击的标签对象中,index属性的属性值
var index = eTag.getAttribute('index');
// 根据属性值,也就是索引下标,执行删除数组单元程序
arr.splice(index , 1);
// 根据新的数组,重新渲染页面,生成新的tbody内容
setTab();
}
}
// 事件委托的优点
// 1,不用循环遍历,执行效率就调高了
// 只是给父级添加事件,判断触发事件的目标
// 2,不同考虑代码的执行顺序
// 只要给一个一直存在的,不是动态生成的父级标签,添加事件
// 判断触发事件的目标 即可 如果有执行,没有不执行
// 不同考虑添加事件的时候,标签是否已经存在
// 一般是选择层级关系最近的,一直存在的标签,添加事件
// 例如我们demo中,使用的是 tbody 如果非要使用table 也是可以的
// 只要判断准确,不冲突即可
// 3,今后我们生成的页面,基本都是动态渲染的,事件委托的方式,会经常使用
</script>
</body>
