HTML常用标签与界面交互总结.md
-
表格标签
table
caption
thead
th
tbody
tr
td
tfoot<!DOCTYPE html> <html> <table> <caption>表格的标题</caption> <!-- 表头 --> <thead> <tr> <th>表头值字段<th> </tr> </thead> <!-- 表格内容 --> <tbody> <tr> <td>数据</td> <tr> </tbody> </table> </html>表格的跨列、跨行
在td标签里书写 colspan='列数' | rowspan='行数'
-
form表单
<form action="地址" method="提交的方式get/most" enctype="数据添加的格式"></form> -
文本框元素
<input type="text" name="" value=""> -
密码框元素
<input type="password" name="" value=""> -
单选框
单选框的name属性表示分组，name值为同一个的为一组<input type="radio" name="" value="" checked> -
复选框
<input type="checkbox" name="" value="" checked> -
下拉框
<select name=""> <option value="" selected></option> </select> -
文本域
<textarea name=""></textarea> -
文件标签
<input type="file" name=""> -
按钮
<button type="button">普通按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button>
综合练习:实现表格数据的增删改查
html源代码如下:
<!DOCTYPE html>
<html lang="zh_CN">
<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>
</head>
<body>
<!-- 顶部查询文本输入框、查询添加按钮 -->
<input type="text" name="search-photo" placeholder="支持车牌号模糊查询">
<button type="button" id="search-button">查询</button>
<button type="button" id="add-button">新增</button>
<select name="order">
<option value="1">里程降序显示</option>
<option value="2">准载人数升序显示</option>
<option value="3">价格升序显示</option>
<option value="4">复原</option>
</select>
<button type="button" id="order-button">排序</button>
<!-- 展示数据的表格 -->
<table border="1" id="show">
<!-- 设置表头信息 -->
<thead>
<tr>
<th>车牌号</th>
<th>里程数</th>
<th>准载人数</th>
<th>租赁价格</th>
<th colspan="2">
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 新增汽车信息的表单,默认不显示，点击顶部新增按钮时才显示 -->
<form id="add-form" style="display:none ;">
<table>
<caption>新增汽车信息</caption>
<tbody>
<tr>
<td align="right">汽车牌照:</td>
<td><input type="text" name="photo" placeholder="请输入汽车牌照"><span></span></td>
</tr>
<tr>
<td align="right">汽车行驶里程数:</td>
<td><input type="text" name="mile" placeholder="请输入汽车行驶里程数"><span></span></td>
</tr>
<tr>
<td align="right">汽车准载人数:</td>
<td><select name="passenger">
<option value="1">1</option>
<option value="4">4</option>
<option value="7">7</option>
</select></td>
</tr>
<tr>
<td align="right">汽车租赁价格:</td>
<td><input type="text" name="price" placeholder="请输入租赁价格"><span></span></td>
</tr>
<tr>
<td align="right"><button type="reset">重置</button></td>
<td><button type="submit" id="add-new-car-button">确认添加</button></td>
</tr>
</tbody>
</table>
</form>
<!-- 修改汽车信息的表单,默认不显示，点击编辑按钮时才显示 -->
<form id="edit-form" style="display:none ;">
<table>
<caption>修改汽车信息</caption>
<tbody>
<tr>
<td align="right">汽车牌照[不可修改]:</td>
<td><input type="text" name="photo" readonly></td>
</tr>
<tr>
<td align="right">汽车行驶里程数:</td>
<td><input type="text" name="mile" placeholder="请输入汽车行驶里程数"><span></span></td>
</tr>
<tr>
<td align="right">汽车准载人数:</td>
<td><select name="passenger">
<option value="1">1</option>
<option value="4">4</option>
<option value="7">7</option>
</select></td>
</tr>
<tr>
<td align="right">汽车租赁价格:</td>
<td><input type="text" name="price" placeholder="请输入租赁价格"><span></span></td>
</tr>
<tr>
<td align="right"><button type="reset">重置</button></td>
<td><button type="submit" id="edit-car-button">确认修改</button></td>
</tr>
</tbody>
</table>
</form>
<!-- 实现动态修改表格数据 -->
<script>
//声明一个变量来保存需要展示的数据对象，默认为空
let cars = [];
//实现载入数据的方法
let loadData = function (data) {
//保存要拼接的sql语句
let row = [];
//遍历数据数据，依次赋值到表格的某一行中：拼接html语句
data.forEach(car => {
//每个对象对应一行数据
row.push('<tr>');
row.push(`<td name="photo">${car.photo}</td>`);
row.push(`<td name="mile">${car.mile}</td>`);
row.push(`<td name="passenger">${car.passenger}</td>`);
row.push(`<td name="price">${car.price}</td>`);
row.push('<td><button type="button" id="edit-button">编辑</button></td>');
row.push('<td><button type="button" id="delete-button">删除</button></td>');
row.push('</tr>');
});
//判断数据是否为空
if (row.length == 0) {
let empty = '<tr><td align = "center" colspan="5">数据为空！</td></tr>';
//插入语句
document.querySelector('tbody').innerHTML = empty;
} else {
//插入语句到tbody中
document.querySelector('#show').querySelector('tbody').innerHTML = row.join('');
}
//初始化按钮事件
initAllEditButtonListener();
};
//给所有行的编辑按钮添加事件
function initAllEditButtonListener() {
//先找到表格里面所有的编辑和删除按钮
let editButtons = document.querySelector('#show').querySelectorAll('#edit-button');
let deleteButtons = document.querySelector('#show').querySelectorAll('#delete-button');
//给每个编辑按钮都加上事件
editButtons.forEach(editButton => editButton.addEventListener('click', function () {
//拿到当前行的数据
let carPhoto = editButton.parentElement.parentElement.firstElementChild.innerText;
let car = cars.find(car => car.photo == carPhoto);
//拿到编辑界面的元素
let editElements = document.querySelector('#edit-form').querySelectorAll('[name]');
//把当前行的数据赋值给编辑界面对应的位置上去
editElements.forEach(element => element.value = car[element.name]);
//显示编辑界面
document.querySelector('#edit-form').style.display = 'block';
}));
//给每个删除按钮添加事件
deleteButtons.forEach(deleteButton => deleteButton.addEventListener('click', function () {
//拿到当前行的数据
let carPhoto = deleteButton.parentElement.parentElement.firstElementChild.innerText;
//找到当前行元素在数组中的索引，根据索引删除
let index = cars.forEach(car => car.photo = carPhoto);
cars.splice(index, 1);
//刷新数据
loadData(cars);
}));
}
//载入原始数据
loadData(cars);
//绑定监听事件
registerListener();
//给新增按钮添加事件
let addButton = document.querySelector('#add-button');
addButton.addEventListener('click', addCarInfo);
//添加按钮的事件
function addCarInfo() {
//展示新增界面
document.querySelector('#add-form').style.display = 'block';
}
//验证数据非空
function verifyDataIsNotEmpty() {
let value = this.value;
if (value == '') {
this.nextElementSibling.innerText = '数据不能为空!';
return false;
}
this.nextElementSibling.innerText = '';
return true;
}
//给新增和编辑的组件绑定数据验证事件
function registerListener() {
//新增界面组件添加监听事件
document.querySelector('#add-form').querySelectorAll('[name]').forEach(element => {
element.addEventListener('blur', verifyDataIsNotEmpty);
element.addEventListener('input', verifyDataIsNotEmpty);
});
//编辑界面组件添加监听事件
document.querySelector('#edit-form').querySelectorAll('[name]').forEach(element => {
element.addEventListener('blur', verifyDataIsNotEmpty);
element.addEventListener('input', verifyDataIsNotEmpty);
});
}
//给新增的表单添加事件
let addForm = document.querySelector('#add-form');
addForm.addEventListener('submit', addNewCarInfo);
function addNewCarInfo(event) {
//拿到新增数据，添加到数组中，重新载入数据
let info = document.querySelector('#add-form').querySelectorAll('[name]');
//非空校验
let flag = true;
//验证车牌号:首为为汉字，第二位为大写字母，后面5个数字和大写字母的组合
let regStr = /^[\u4e00-\u9fa5][A-Z][0-9A-Z]{5}$/;
//数据不为空，才添加
let car = {};
info.forEach(element => {
car[element.name] = element.value;
if (element.value == '') {
flag = false;
};
});
//车牌格式正确,才添加
if(!regStr.test(car.photo)){
flag=false;
info[0].nextElementSibling.innerText = '车牌号格式不正确!';
}
//数据不为空，格式正确，进行添加操作
if (flag) {
cars.push(car);
loadData(cars);
//新增成功，新增界面隐藏
document.querySelector('#add-form').style.display = 'none';
//重置信息
document.querySelector('#add-form').reset();
} else {
//新增成功，新增界面隐藏
document.querySelector('#add-form').style.display = 'block';
}
//去掉按钮默认的跳转
event.preventDefault();
}
//给编辑界面的确定按钮添加事件
let editCarButton = document.querySelector('#edit-car-button');
editCarButton.addEventListener('click', editCarInfo);
function editCarInfo(event) {
//拿到新增数据，添加到数组中，从新载入数据
let info = document.querySelector('#edit-form').querySelectorAll('[name]');
let newCar = {};
info.forEach(element => newCar[element.name] = element.value);
//在数据数值找到对应的车牌号修改数据
let index = cars.findIndex(car => newCar.photo == car.photo);
//替换数据
cars.splice(index, 1, newCar);
loadData(cars);
//修改成功，新增界面隐藏
document.querySelector('#edit-form').style.display = 'none';
//重置信息
document.querySelector('#edit-form').reset();
//去掉按钮默认的跳转
event.preventDefault();
}
//给查询按钮添加事件
let searchButton = document.querySelector('#search-button');
searchButton.addEventListener('click', function () {
//拿到查询条件
let condition = document.querySelector('[name="search-photo"]').value;
let conditionCar = [];
//如果条件为空，则显示全部汽车信息
if (condition == '') {
loadData(cars);
}
//条件不为空，按照条件查询：包含
cars.forEach(car => {
if (car.photo.includes(condition)) {
conditionCar.push(car);
}
});
//显示筛选过的信息
loadData(conditionCar);
});
//里程降序排列事件
let order = document.querySelector('#order-button');
order.addEventListener('click', function () {
let condition = document.querySelector('[name="order"]');
//用副本排序，然后显示[数组的深拷贝]
let copy = cars.slice(0);
if (condition.value == 1) {
//里程降序
copy.sort((prev, next) => next.mile - prev.mile);
} else if (condition.value == 2) {
//准载人数升序
copy.sort((prev, next) => prev.passenger - next.passenger);
} else if (condition.value == 3) {
//价格升序
copy.sort((prev, next) => prev.price - next.price);
} else {
//复原:
loadData(cars);
}
loadData(copy);
});
</script>
</body>
</html>