// 操作标签的属性和属性值
// 特殊的属性
// 可以直接通过 点语法或者[]语法来操作的属性
// id 和 class
// 标签.id 可以操作设定 id属性和属性值
// 标签.className 可以操作设定 class属性和属性值
// 直接写是获取,带有赋值的是设定
// 标签对象.id 标签对象.className 获取属性值
// 标签对象.id = 赋值 标签对象.className = 赋值 设定属性值
// 所有属性都可以使用的操作方式
// 获取属性值 : getAttribute('属性')
// 设定属性值 : setAttribute('属性' , '属性值')
// 设定标签对象属性值
// 标签对象.setAttribute('属性' , '属性值')
// 获取标签对象属性
// 标签对象.getAttribute('属性')
<body>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>地址</td>
<td>删除</td>
</tr>
</thead>
<tbody class="t1"></tbody>
</table>
<script src="./tools.js"></script>
<script>
// 根据从数据库获取的数据,生成table表格
// 数值中存储对象来模拟数据库数据
// 删除思路:
// 1,在生成table表格中,在循环之后,再新增一个删除的单元格
// 内容 是 td 中 嵌套 button 标签
// 需要给button标签添加 属性 , 属性值是生成这行数据的对象,在数组中的索引下标
// 目标是点击标签时,可以获取到要删除的数据,在数组中的索引下标
// 2,获取所有的button标签按钮
// 通过循环遍历,给button标签按钮,添加删除效果
// 点击标签时,获取点击标签index属性的属性值
// 也就是要删除的数据,也就是对象在数组中的索引下标
// 根据这个索引下标,在数组中删除数据
// 3,生成table表格的函数
// 4,
var arr = [
{ id: 1, name: '张三', age: 18, sex: '男', addr: '北京' },
{ id: 2, name: '李四', age: 17, sex: '女', addr: '上海' },
{ id: 3, name: '王五', age: 16, sex: '保密', addr: '广州' },
{ id: 4, name: '赵六', age: 15, sex: '男', addr: '重庆' },
{ id: 5, name: '刘七', age: 14, sex: '女', addr: '天津' },
];
var oTbody = document.querySelector('.t1');
// 不同页面,不同程序
// 数组的名称,可能不同,写入标签的对象,名称也可能不同
// 不能修改外部文件中的函数,其中定义的程序
// 必须以参数的形式输入数组和需要写入内容的标签名称
// 在文件中只调用一次 setTable()
// 其他程序都是定义在外部js文件中
setTable(arr , oTbody);
</script>
</body>
// 参数有两个
// 参数1 : 数组 生成table表格使用的数组
// 参数2 : 对象 写入字符串的标签对象
function setTable(array , element){
// 定义一个空字符串,存储数组生成的字符串
var str = '';
// 循环遍历数组,这个数据是外部输入的实参数组
// v 存储的是数组的数据,也就是对象
// k 存储的是数组的索引下标
array.forEach(function (v, k) {
// 拼接tr标签的起始标签
str += '<tr>';
// 循环遍历 对象 生成 td 单元格 单元格的内容,就是对象的属性值
// key中存储的就是对象v中的属性,v[key]就是调用属性值
for (var key in v) {
// 拼接td单元格,单元格内容就是对象的属性值
str += `<td>${v[key]}</td>`;
}
// 拼接删除单元格
// td中嵌套button按钮标签,给button按钮添加属性,属性值是对象的索引下标
// 执行删除时,根据索引下标,删除数组中的数据单元
str += `<td><button index="${k}">删除</button></td>`;
// 拼接tr标签的结束标签
str += '</tr>';
});
// 将拼接好的字符串内容,写入到指定的标签对象中
// 执行函数时,输入的第二个实参
element.innerHTML = str;
// 一旦生成table表格,就给table表格中的button按钮绑定删除效果
// 获取button按钮标签对象
var oBtns = document.querySelectorAll('button');
// 执行给button按钮绑定点击事件,执行删除数据效果的函数
setButton(oBtns , array , element);
}
// 参数1 : 绑定点击事件的button标签对象,是一个伪数组
// 这两个参数,是 setTable() 需要的两个参数
// 参数2 : 数值 , 生成table表格使用的数组
// 参数3 : 对象 写入字符串的标签对象
function setButton(eleArr , array , element){
eleArr.forEach(function (item) {
item.onclick = function () {
var index = item.getAttribute('index');
array.splice(index, 1);
setTable(array,element);
}
})
}