<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合练习</title>
<style>
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid #eee;
padding: 2px 15px;
text-align: center;
}
td button {
margin-right: 4px;
}
#search {
border: 1px solid #eee;
margin: 5px 0;
padding: 5px;
}
#edit{
width: 300px;
height: 200px;
border: 1px solid black;
padding: 10px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: none;
}
#edit #closeEdit{
width: 30px;
height: 30px;
background-color: lightcoral;
color: white;
text-align: center;
line-height: 30px;
border-radius: 50%;
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div id="search">
<span>车名(模糊查询)：</span>
<input type="text" id="searchText">
<button id="searchBtn">搜索</button>
<button id="add">添加</button>
</div>
<table>
<thead>
<tr>
<th>车名</th>
<th>颜色</th>
<th>价格</th>
<th>产地</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="edit">
<div id="closeEdit">X</div>
<table>
<tr>
<td colspan="2" id="title">
添加汽车信息
</td>
</tr>
<tr>
<td>车名：</td>
<td>
<input type="text" id="carname">
</td>
</tr>
<tr>
<td>颜色：</td>
<td>
<input type="text" id="color">
</td>
</tr>
<tr>
<td>价格：</td>
<td>
<input type="text" id="price">
</td>
</tr>
<tr>
<td>产地：</td>
<td>
<input type="text" id="address">
</td>
</tr>
<tr>
<td></td>
<td>
<button id="submit">提交</button>
<button id="cancel">取消</button>
</td>
</tr>
</table>
</div>
<script>
// 页面加载事件
window.onload = function () {
//调用加载数据的方法
loadData()
//搜索按钮注册点击事件
searchBtn.onclick = function () {
//调用加载数据的方法
loadData()
}
//添加按钮点击事件
add.onclick = function(){
isAdd = true //表示是添加操作
edit.style.display = 'block'
title.innerHTML = "添加汽车信息"
}
//关闭按钮点击事件
closeEdit.onclick = function(){
edit.style.display = 'none'
//清空表单数据
clear()
}
//取消按钮点击事件
cancel.onclick = function(){
//清空表单数据
clear()
}
//提交按钮点击事件
submit.onclick = function(){
if(carname.value==="" || color.value==="" || price.value==="" || address.value===""){
alert('请输入完整信息')
return
}
//判断当前提交按钮的行为，isAdd为true，做添加，否则做修改
if(isAdd){
// 创建一个汽车对象
let car = {
name:carname.value,
color:color.value,
price:price.value,
address:address.value
}
// 将汽车对象添加都数组中
cars.push(car)
alert('添加成功！')
}else{
//获取需要修改的汽车对象
let car = cars[updateIndex]
car.name = carname.value
car.color = color.value
car.price = price.value
car.address = address.value
alert('修改成功！')
}
//调用加载数据的方法
loadData()
//清空表单数据
clear()
}
}
//该变量，用于表示是否是添加操作
let isAdd = true
//该变量，用于保存修改的那个汽车对象在数组中的索引
let updateIndex = -1
// 定义一个汽车数组
let cars = [
{
name: '奔驰S500',
color: '黑色',
price: '50W',
address: '德国'
},
{
name: '东方350',
color: '白色',
price: '15W',
address: '中国'
}
]
//清空表单数据的方法
function clear(){
carname.value = ""
color.value = ""
price.value = ""
address.value = ""
}
//加载数据的方法
function loadData() {
// 先清空tbody里面的内容
tbody.innerHTML = ""
// 获取搜索框里面的内容
let val = searchText.value
// 循环数组
cars.filter(c => c.name.includes(val)).forEach((c,index) => {
// 每个汽车对象，创建一个tr标签
let tr = $c('tr')
let td1 = $c('td')
td1.innerHTML = c.name
let td2 = $c('td')
td2.innerHTML = c.color
let td3 = $c('td')
td3.innerHTML = c.price
let td4 = $c('td')
td4.innerHTML = c.address
let td5 = $c('td')
let btn1 = $c('button')
btn1.innerHTML = '修改'
// 给修改按钮绑定点击事件
btn1.onclick = function(){
// 调用update方法，将当前汽车对象传过去
updateCar(c,index)
}
let btn2 = $c('button')
btn2.innerHTML = '删除'
// 给删除按钮绑定点击事件
btn2.onclick = function(){
// 调用删除汽车的方法
deleteCar(index)
}
td5.appendChild(btn1)
td5.appendChild(btn2)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
//将tr添加到tbody中
tbody.appendChild(tr)
})
}
// 修改按钮点击事件调用的方法
function updateCar(c,index){
//将当前需要修改的汽车对象的索引，赋值给全局的updateIndex
updateIndex = index
isAdd = false //表示是修改操作
edit.style.display = 'block'
title.innerHTML = "修改汽车信息"
// 在表单中显示对应的汽车信息
carname.value = c.name
color.value = c.color
price.value = c.price
address.value = c.address
}
// 该方法，用于删除指定的汽车
function deleteCar(index){
if(confirm('确定删除吗？')){
//获取当前汽车在数组中位置
cars.splice(index,1)
//调用加载数据的方法
loadData()
}
}
// 创建元素的方法
function $c(tagName) {
return document.createElement(tagName)
}
</script>
</body>
</html>
