效果如图
`
最终考核 /* 设置表格属性，蓝色边框，居中，设置两个表格边框合并为一格，宽高各为 px*/ table { border-collapse: collapse; margin: auto; border-color: #0000FF; width: 500px; height: 500px; } /* 设置行列边框为 3 像素蓝色实线 */ td, th { border: #0000FF 3px solid; } /* 设置隔行变色 */
tr:nth-child(2n) {
background-color: #80ffd5;
}
| 全选 | 收件人 | 邮件名称 | 邮件附属信息 |
|---|---|---|---|
| 全选 | 取消全选 | 反选 | 删除所有附件 |
var tablenode = document.querySelector('tbody');
for (var i = 0; i < arr.length; i++) { // 根据数据创建行的
var tr = document.createElement('tr')
tablenode.appendChild(tr);
for (var k in arr [i]) { // 创建列的
var td = document.createElement('td');
td.innerHTML = arr [i][k]; // 这里是添加数据
tr.appendChild(td);
}
}
// 获取按钮控件
var btnfx = document.querySelector('.fx');
var allin = document.querySelector('.allin');
function getAll() {
// 获取所有名为 input 的控件，全选函数
var all = document.getElementsByTagName('input');
for (var i of all) {
i.checked = true;
}
}
// 全不选函数
function getNoall() {
var all = document.getElementsByTagName('input');
for (var i of all) {
i.checked = false;
}
}
// 反选
btnfx.addEventListener('click', function() {
var all = document.getElementsByTagName('input');
for (var i of all) {
i.checked = !i.checked;
}
});
// 全选 / 全不选框
allin.addEventListener('change', function() {
if (this.checked) {
getAll();
} else {
getNoall();
}
});
// 删除
btndel.onclick = function() {
var mylast = document.querySelectorAll("tr td");
//var len=my.rows.length;
for (var i = 0; i < mylast.length; i++) {
mylast[i].remove();
}
}
