前端——JavaScript练习 做一个todoList
用前端制作一个todoList的表格，实现更新、删除、修改等功能。
涉及几个知识点：
- 设置最小高度（宽度）：
.container{
min-width: 350px;
/* 最小宽度 最小不会小于210px */
}- 去掉外轮廓
outline: none;- 去除字符串两端的空白字符（包括空格、制表符、换行符等）
info.value.trim()- previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
var target=this.parentElement.previousElementSibling- confirm 询问
if(confirm("是否删除该事件？")){ target.parentElement.removeChild(target) }最终结果显示：
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 10%;
min-width: 350px;
/* 最小宽度 最小不会小于210px */
/* background: blanchedalmond; */
margin: 150px auto;
}
.container .addBox{
display: flex;
}
.container .addBox .info{
width: 80%;
border: 2px solid burlywood;
outline: none;
/* 去掉外轮廓 */
padding: 5px;
cursor: pointer;
border-radius: 10%;
}
.container .addBox .botton{
width: 15%;
background: rgb(157, 110, 202);
color: #ffffff;
padding: 5px;
border-radius: 10px;
}
.container .addBox .botton:hover{
opacity:0.8;
}
table{
margin-top: 15px;
width: 100%;
border-collapse: collapse;
}
table thead tr{
font-size: 15px;
padding: 5px;
background:rgb(155, 69, 192) ;
color: #ffffff;
}
table tbody tr:nth-child(odd){
background: rgb(212, 174, 198);
}
table tbody tr:nth-child(even){
background: rgb(208, 174, 220);
}
table tbody tr td{
padding: 5px;
font-size: 15px;
text-align: center;
}
table tbody tr td input{
background: none;
border: rgb(155, 69, 192) 3px solid;
color: rgb(255, 255, 255);
border-radius: 3px;
cursor: pointer;
}
table tbody tr td input:hover{
box-shadow: 1px 2px 1px rgb(233, 230, 216);
}
/* table thead tr td{
text-decoration: line-through;
} */
</style>
<script>
window.onload=function(){
// 获取元素
var botton= document.querySelector(".botton")
var info= document.querySelector(".info")
var tbody=document.querySelector("tbody")
// 表格行的起始位置值是0
var rowindex=0
// 当前要修改的行的值
var updateIndex
// 给add按钮绑定事件
botton.onclick=function(){
if(updateIndex){
// 修改
var trs=document.querySelectorAll("table tbody tr")
for(var l=0;l<trs.length;l++){
if(trs[l].getAttribute("index")==updateIndex){
if(info.value){
trs[l].firstElementChild.innerText=info.value
info.value=""
botton.value="add"
updateIndex=undefined
}else{
alert("不能为空")
}
}
}
return
}
// console.log(info.value)
if(info.value.trim()){
// trim()消除值前没有用的空格
// 添加
//创建元素 document.createElement("标签名称")
var tr=document.createElement("tr")
var td_one=document.createElement("td")
var td_two=document.createElement("td")
// 获取输入框中的值，innerText内部文字
td_one.innerText=info.value
// innerHTML内部结构
td_two.innerHTML='<input type="button" value="mark" class="mark"><input type="button" value="update" class="update"><input type="button" value="delete" class="del">'
//td放入tr中 appendChild(元素)
tr.appendChild(td_one)
tr.appendChild(td_two)
// 设置index
tr.setAttribute("index",rowindex)
rowindex++
//tr放入tbody中
tbody.appendChild(tr)
// 清空输入框的值 给info.value赋值
info.value=" "
// 删除
var dels=document.querySelectorAll(".del")
for(j=0;j<dels.length;j++){
dels[j].onclick=function(){
var target=this.parentElement.parentElement
if(this.parentElement.previousElementSibling.style.textDecoration=="line-through"){
if(confirm("是否删除该事件？")){
target.parentElement.removeChild(target)
// confirm 询问
}else{
alert("删除已取消！")
}
}else{
alert("坚持完成，不要半途而废")
}
}
}
// 中划线
var marks=document.querySelectorAll(".mark")
for(var i=0;i<marks.length;i++){
marks[i].onclick=function(){
var target=this.parentElement.previousElementSibling
// previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
if(target.style.textDecoration==""){
target.style.textDecoration="line-through"
target.style.color="#888"
}else{
target.style.textDecoration=""
target.style.color="#000"
}
}
}
// 回显
var updates=document.querySelectorAll(".update")
for(k=0;k<updates.length;k++){
updates[k].onclick=function(){
var target=this.parentElement.previousElementSibling
if(target.style.textDecoration==""){
info.value=target.innerText
botton.value="update"
updateIndex=this.parentElement.parentElement.getAttribute("index")
}else{
alert("事件已经完成了")
}
}
}
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="addBox">
<input type="text" class="info">
<input type="button" value="add" class="botton">
</div>
<table border="1">
<thead>
<tr>
<th>事项</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</body>
</html>原文地址：https://blog.csdn.net/2301_78566776/article/details/142339291
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！