创建 表格表头
<body>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
<td>删除</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 定义数组模拟后端返回的数据
var arr = [
{ id: 1, name: '张三', age: 18, sex: '男', addr: '北京' },
{ id: 2, name: '李四', age: 19, sex: '女', addr: '上海' },
{ id: 3, name: 'jack', age: 20, sex: '男', addr: '广州' },
{ id: 4, name: '王五', age: 21, sex: '女', addr: '重庆' },
{ id: 5, name: 'lucy', age: 22, sex: '保密', addr: '天津' },
];
// 调用下边的函数动态生成页面
fun();
// 动态生成页面用函数包起来, 起个名字, 方便调用 ,以及删除后再次调用渲染页面
function fun(){
// 先创建个空的 ,装想要写入的标签及内容
var str =``;
// 循环生成, 数组的索引下标 (0---数组.length-1)
for(var i = 0 ; i <= arr.length-1;i++){
// 动态写入: 标签 + ${ 数组[对应的索引下标] . 对应的属性(有几种下边写几个)}解析出属性值
str +=`
<tr>
<td>${arr[i].id}</td>
<td>${arr[i].name}</td>
<td>${arr[i].age}</td>
<td>${arr[i].sex}</td>
<td>${arr[i].addr}</td>
<td><button>删除</button></td>
</tr>
`;
}
// 获取 tbody 标签
var oTbody = document.querySelector('tbody');
// 给 tbody 标签 写入 动态生成的东西
oTbody.innerHTML = str;
// 获取 生成的 button (注:必须先生成 再获取)
var oBtons = document.querySelectorAll('button')
// forEach 循环所有的 button ( 参数1存:button 参数2存:button的索引下标 )
oBtons.forEach(function(item , key){
// 添加事件 点击 参数1存的:button
item.addEventListener('click',function(){
// 弹出 确认框 询问?
if(window.confirm(`您确定要删除吗?`)){
// 删除 ,数组 对应索引下标的单元(也是button的所以下标) 删除1个
arr.splice(key,1)
// 再次渲染生成页面
fun();
}
})
})
}
</script>
