|
要求：
????????1、根据数据，使用 JavaScript 动态创建表格。
????????2、实现实现复选框全选功能。? ? ? ?
? ? ? ? ? ? ? 其一，?要求点击头部的复选框，下面子复选框全部选中或取消；
? ? ? ? ? ? ? 其二，下面子复选框，只有全部选中完，头部复选框才能，被选中。
步骤：
动态创建表格
1、对HTML页面进行简单的布局；
2、循环遍历数组，获取每一项数据
3、使用模板字符串经行拼接
var userList = [
{ ID: 1, name: '张三', age: 29, gender: '男' },
{ ID: 2, name: '张三', age: 29, gender: '男' },
{ ID: 3, name: '张三', age: 29, gender: '男' },
{ ID: 4, name: '张三', age: 29, gender: '男' },
{ ID: 5, name: '张三', age: 29, gender: '男' },
{ ID: 6, name: '张三', age: 29, gender: '男' }
]
var html = ``
for (var i = 0; i < userList.length; i++) { // 循环遍历数组
// 模板字符串进行拼接
html += `
<tr>
<td>
<input type="checkbox" class ='item'>
</td>
<td>${userList[i].ID}</td>
<td>${userList[i].name}</td>
<td>${userList[i].age}</td>
<td>${userList[i].gender}</td>
</tr>
`
}
var tbody = document.querySelector('tbody')
tbody.innerHTML = html
实现全选功能
1、获取元素
????????1.头部选择框
????????2.子选择框
2、给头部按钮添加点击事件
? ? ? ?获取头部按钮的选中状态（使用?checked?原生属性）
? ? ? ?循环遍历items，给每一个?input?设置?checked?属性
3、给每一个items?里每一个都添加点击事件
????????遍历?items?里面每一个?是不是都是选中状态
????????先假设一个变量，假设所有都被选中，只要有一个没被选中，把假设否定，结束循环
4、根据我判断假设的值，设置头部选中框状态
// 获取元素
var head = document.querySelector('.head')
var items = document.querySelectorAll('.item')
// 给头部按钮添加点击事件
head.onclick = function () {
var type = head.checked
for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}
// 给每一个items 里每一个都添加点击事件
items.forEach(function (item) {
// 添加点击事件
item.onclick = function () {
var flag = true
items.forEach(function (item) {
if (!item.checked) flag = false
})
head.checked = flag
}
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
margin: 30px auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox" class="head">
</th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
var userList = [
{ ID: 1, name: '张三', age: 29, gender: '男' },
{ ID: 2, name: '张三', age: 29, gender: '男' },
{ ID: 3, name: '张三', age: 29, gender: '男' },
{ ID: 4, name: '张三', age: 29, gender: '男' },
{ ID: 5, name: '张三', age: 29, gender: '男' },
{ ID: 6, name: '张三', age: 29, gender: '男' }
]
var html = ``
for (var i = 0; i < userList.length; i++) {
html += `
<tr>
<td>
<input type="checkbox" class ='item'>
</td>
<td>${userList[i].ID}</td>
<td>${userList[i].name}</td>
<td>${userList[i].age}</td>
<td>${userList[i].gender}</td>
</tr>
`
}
var tbody = document.querySelector('tbody')
tbody.innerHTML = html
// 获取元素
var head = document.querySelector('.head')
var items = document.querySelectorAll('.item')
console.log(head)
console.log(items)
// 给头部按钮添加点击事件
head.onclick = function () {
var type = head.checked
for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}
// 给每一个items 里每一个都添加点击事件
items.forEach(function (item) {
// 添加点击事件
item.onclick = function () {
var flag = true
items.forEach(function (item) {
if (!item.checked) flag = false
})
head.checked = flag
}
})
</script>
</body>
</html>
|