表单一点击提交按钮(submit)必然跳转页面，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下，这就是表单的默认行为。
组织默认行为，有两种办法：
第一种是input提交换成button，type类型是button，监听button的点击事件，就不会触发表单默认提交行为了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
<title>表单添加，表格删除</title>
</head>
<body>
<div class="container center-block">
<div class="row">
<div class="col-md-6 col-md-offset-3 wrap">
<!-- 表单开始 -->
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">商品名称</label>
<div class="col-sm-10">
<input class="form-control" id="name">
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">分类</label>
<div class="col-sm-10">
<input class="form-control" id="category">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" type="button">提交</button>
<!-- <input type="submit" class="btn btn-primary" value="提交"> -->
</div>
</div>
</form>
<!-- 表单结束，表格开始 -->
<table class="table table-striped">
<tr>
<th>商品名称</th>
<th>分类</th>
<th></th>
</tr>
</table>
<!-- 表格结束 -->
</div>
</div>
</div>
<script>
let btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
let nameVal = document.getElementById("name").value;
let categoryVal = document.getElementById("category").value;
let table = document.querySelector(".table")
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${nameVal}</td>
<td>${categoryVal}</td>
<td><span class="glyphicon glyphicon-remove"></span></td>
`
table.appendChild(tr);
document.getElementById("name").value="";
document.getElementById("category").value="";
})
//删除列表
let table = document.querySelector(".table");
table.addEventListener("click",(e)=>{
let targetTr= e.target.parentElement.parentElement;
targetTr.remove();
})
</script>
</body>
</html>
第二种是监听表单的submit事件，回调里阻止表单默认行为
<!-- <button class="btn btn-default" type="button">提交</button> -->
<input type="submit" class="btn btn-default" value="提交">
let form = document.querySelector(".form-horizontal");
//(监听表单的submit事件)
form.addEventListener("submit", (e) => {
let nameVal = document.getElementById("name").value;
let categoryVal = document.getElementById("category").value;
let table = document.querySelector(".table")
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${nameVal}</td>
<td>${categoryVal}</td>
<td><span class="glyphicon glyphicon-remove"></span></td>
`
table.appendChild(tr);
document.getElementById("name").value="";
document.getElementById("category").value="";
e.preventDefault() //阻止默认行为
})
//删除列表
let table = document.querySelector(".table");
table.addEventListener("click",(e)=>{
let targetTr= e.target.parentElement.parentElement;
targetTr.remove();
})
在table上监听click事件，寻找事件源，然后把事件源的上级的上级整个删除
使用vue处理逻辑的话，两个方法，只有下面几行代码
export default {
data() {
return {
name: "",
category: "",
list: [
{
name: "张三",
category: "321"
},
{
name: "lisi",
category: "444"
}
]
}
},
methods: {
submit() {
this.list.push({
name: this.name,
category: this.category
})
},
delItem(i) {
this.list.splice(i, 1)
}
}
}
数据做双向绑定，button添加事件方法即可
网友评论