HTML常用标签与界面交互总结.md

  1. 表格标签

    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=’行数’

  2. form表单

    <form action="地址" method="提交的方式get/most" enctype="数据添加的格式"></form>

  3. 文本框元素

    <input type="text" name="" value="">

  4. 密码框元素

     <input type="password" name="" value="">

  5. 单选框
    单选框的name属性表示分组，name值为同一个的为一组

    <input type="radio" name="" value="" checked>

  6. 复选框

    <input type="checkbox" name="" value="" checked>

  7. 下拉框

    <select name="">
     <option value="" selected></option>
 </select>

  8. 文本域

     <textarea name=""></textarea>

  9. 文件标签

    <input type="file" name="">

  10. 按钮

    <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>

原文地址：http://www.cnblogs.com/jackchen1928/p/16829773.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性