html
<!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>
*{
margin: 0%;
padding: 0%;
}
.container{
width:30%;
margin:150px auto;
min-width: 200px; /* 设一个保底宽度，以防止特定调整下变形太严重 */
}
.container .addBox{
display:flex;
}
.container .addBox .info{
width:90%;
border:2px solid aqua;
padding:5px;
outline:none; /* 去掉外轮廓 */
border-radius: 10px 0 0 10px;
}
.container .addBox .btn{
background: aquamarine;
color:#d91b1b;
padding:10px;
border-style: dashed;
border-width: 1px;
}
.container .addBox .btn:hover{
opacity: 50%;
}
table{
margin-top:15px;
width:100%;
border-collapse: collapse;
}
table thead tr{
background: aquamarine;
}
table thead tr th{
font-size: 13px;
padding: 3px;
}
table tbody tr:nth-child(odd){
background: aqua;
}
table tbody tr:nth-child(even){
background: aquamarine;
}
table tbody tr td{
font-size: 13px;
padding: 3px;
text-align: center;
margin: 1px auto;
}
table tbody tr td input{
margin: 2px 10px;
}
table tbody tr td input{
border:solid aquamarine;
color:#d91b1b;
background: azure;
box-shadow: 0 0 5px ;
}
</style>
<script>
window.onload=function(){
// ============输入================
// 获取元素
var btn=document.querySelector(".btn")
var info=document.querySelector(".info")
var tbody=document.querySelector("tbody")
var updateIndex
var rowIndex=0 // 表格行的起始值
// 给add按钮绑定事件
btn.onclick=function(){
if(updateIndex){
// 修改
var trs=document.querySelectorAll("table tbody tr")
// console.log(trs)
for (var l=0;l<trs.length;l++){
if(trs[l].getAttribute("index")==updateIndex){
if (info.value.trim()){
trs[l].firstElementChild.innerText=info.value
info.value=""
btn.value="add"
updateIndex=undefined
}else{
alert("不能空！")
}
}
}
return
}
if(info.value.trim()){
// 防止输入空格操作（.trim()）
var tr=document.createElement("tr")
var td_1=document.createElement("td")
var td_2=document.createElement("td")
// 获取输入框中的值，并赋给第一个td
// td_1.value=info.value
// td_2.value=info.value
td_1.innerHTML=info.value
td_2.innerHTML='<input type="button" value="mark" class="mark"><input type="button" value="update" class="update"><input type="button" value="delate" class="delate"> '
// 放入元素
tr.appendChild(td_1)
tr.appendChild(td_2)
// 设置属性
tr.setAttribute("index",rowIndex)
rowIndex++
tbody.appendChild(tr)
info.value=" "
// 最后清除输入框操作
}
// ===============标记===================
var marks=document.querySelectorAll(".mark")
console.log(marks)
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 delate = document.querySelectorAll(".delate")
console.log(delate)
for(var j=0;j<delate.length;j++){
delate[j].onclick=function(){
var target=this.parentElement.parentElement
if (this.parentElement.previousElementSibling.style.textDecoration=="line-through"){
if(confirm("真不要啦？")){
target.parentElement.removeChild(target)
alert("算你狠")
}else{
alert("我就知道你舍不得")
}
}else{
alert("写完再来！")
}
}
}
// ==================回显===================
var updates=document.querySelectorAll(".update")
for(var i=0;i<updates.length;i++){
updates[i].onclick=function(){
var target=this.parentElement.previousElementSibling
if(target.style.textDecoration==""){
info.value=target.innerText // 获取所要修改的文本
btn.value="update"
// btn.value="add"
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="btn">
</div>
<table border="1">
<thead>
<tr>
<th>事项</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>上课</td>
<td>
<input type="button" value="mark">
<input type="button" value="update">
<input type="button" value="delate">
</td>
</tr> -->
</tbody>
</table>
</div>
</body>
</html>