作业1、表格的单行编辑，添加，删除。全部选择和全部删除功能实现。
收藏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表格操作</title>
<style>
table,tr,td{
border: 1px solid grey;
text-align: center;
border-collapse: collapse;
}
thead{background-color: lightseagreen;}
tr td:nth-of-type(2){width: 300px;}
tr td:nth-of-type(3){width: 100px;}
tr td:nth-of-type(4){width: 100px;}
</style>
</head>
<body>
<table id="wrap">
<caption>表格标题</caption>
<thead>
<tr>
<td><input type="checkbox" id="all"></td>
<td>产品名称</td>
<td>***价格</td>
<td>操作方式</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>mac book pro 15.5</td>
<td>19000</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>huawei book pro 全面屏</td>
<td>8800</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>小米游戏本pro 15.6</td>
<td>8999</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name="user-select"></td>
<td>Thankpad xx**</td>
<td>9500</td>
<td><button name="btn">编辑</button><button name="btnl">删除</button></td>
</tr>
</tbody>
</table>
<button id="del-all" disabled>全部删除</button>
<button id="add">添加数据</button>
<script>
// 获取表格
var table = document.getElementById('wrap');
// 获取全选按钮
var all = document.getElementById('all');
// 获取每行的复选框
var userSelect = document.getElementsByName('user-select');
// 获取全部删除按钮
var delall = document.getElementById('del-all');
// 获取单行删除按钮
var btnl = document.getElementsByName('btnl');
// 获取单行编辑按钮
var btn = document.getElementsByName('btn');
all.addEventListener('input',function () {
if (all.checked === true){
// 判断表格内是否有行 如没有 全选复选框不让选
if (userSelect.length === 0){
all.checked = false;
}
// 第一种执行方式
// Object.keys(userSelect).forEach(function (value) {
// console.log(userSelect[value]);
// userSelect[value].checked = true;
// });
// 第二种执行方式
userSelect.forEach(function (value) {
// console.log(value);
value.checked = true;
});
// 设置全部删除按钮为可点击状态
delall.disabled = false;
} else {
// 第一种执行方式
// Object.keys(userSelect).forEach(function (value) {
// console.log(userSelect[value]);
// userSelect[value].checked = false;
// });
// 第二种执行方式
userSelect.forEach(function (value) {
// console.log(value);
value.checked = false;
});
// 设置全部删除按钮为禁止状态
delall.disabled = true;
}
},false);
// 全部删除按钮事件
delall.addEventListener('click',function () {
table.tBodies[0].innerHTML = null;
delall.disabled = true;
all.checked = false;
},false);
// 操作方式 单行操作 删除
Object.keys(btnl).forEach(function (value) {
// console.log(value);
btnl[value].addEventListener('click',function () {
this.parentNode.parentElement.remove();
},false);
});
// 操作方式 单行操作 编辑
Object.keys(btn).forEach(function (value) {
btn[value].addEventListener('click',function () {
var input = prompt('请输入需要修改的内容');
if (input !== null){
if (input.length !== 0){
this.parentNode.parentElement.children[1].innerHTML = input;
}
}
},false);
});
add.addEventListener('click',function () {
var enda = prompt('请输入产品名称');
var endb = prompt('请输入***价格');
// 判断输入
if (enda == null){
return false;
}else if (enda.length === 0){
return false;
}else if(endb == null){
return false;
}else if (endb.length === 0) {
return false;
}
// 添加元素和内容
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="checkbox" name="user-select"></td>';
tr.innerHTML +='<td>' + enda + '</td>';
tr.innerHTML +='<td>' + endb + '</td>';
tr.innerHTML +='<td><button name="btn">编辑</button><button name="btnl">删除</button></td>';
table.tBodies[0].appendChild(tr);
// 添加后再添加一次操作方式的按钮点击事件
btnl[Object.keys(btnl).length - 1].addEventListener('click',function () {
this.parentNode.parentElement.remove();
},false);
btn[Object.keys(btn).length - 1].addEventListener('click',function () {
var input = prompt('请输入需要修改的内容');
if (input !== null){
if (input.length !== 0){
this.parentNode.parentElement.children[1].innerHTML = input;
}
}
},false);
},false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业2、谈一下对单线程,任务队列与事件循环, 同步与异步的理解
单线程只指javaScript的主线程，所有任务都在一条线程上执行。由于只有一条线程执行容易出现堵塞现象。
任务队列是指新建的另外线程，在主线程之外的线程，他不影响主线程的执行。
事件循环是指主线程的任务都执行完成后，任务队列完成的任务会被加载到主线程来执行。
同步是全部在主线程同时执行。
异步是放在任务队列执行。主线程执行完毕后。任务队列里面已完成的任务。会调到主线程来执行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
