您的位置:首页 > 财经 > 金融 > 推广链接让别人点击_广西疫情2024_百度云官网首页_营销型网站和普通网站

推广链接让别人点击_广西疫情2024_百度云官网首页_营销型网站和普通网站

2024/12/23 13:53:12 来源:https://blog.csdn.net/2301_78566776/article/details/142339291  浏览:    关键词:推广链接让别人点击_广西疫情2024_百度云官网首页_营销型网站和普通网站
推广链接让别人点击_广西疫情2024_百度云官网首页_营销型网站和普通网站

用前端制作一个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")// 表格行的起始位置值是0var 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.valueinfo.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)// 设置indextr.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.parentElementif(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.previousElementSiblingif(target.style.textDecoration==""){info.value=target.innerTextbotton.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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com