操作标签的属性和属性值 table表格

// 操作标签的属性和属性值

// 特殊的属性

// 可以直接通过点语法或者[]语法来操作的属性

// id 和 class

// 标签.id 可以操作设定 id属性和属性值

// 标签.className 可以操作设定 class属性和属性值

// 直接写是获取,带有赋值的是设定

// 标签对象.id 标签对象.className 获取属性值

// 标签对象.id = 赋值标签对象.className = 赋值设定属性值

// 所有属性都可以使用的操作方式

// 获取属性值 : getAttribute('属性')

// 设定属性值 : setAttribute('属性' , '属性值')

// 设定标签对象属性值

// 标签对象.setAttribute('属性' , '属性值')

// 获取标签对象属性

// 标签对象.getAttribute('属性')

<body>

<table>

<thead>

<tr>

</tr>

</thead>

</table>

// 根据从数据库获取的数据,生成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);

}

})

}

posted on 2020-11-29 23:18 Tsunami黄嵩粟阅读(111) 评论(0) 收藏举报