JavaScript动态表格，全选，以及表单验证

最新推荐文章于 2023-10-26 17:49:54 发布

MAX--李

最新推荐文章于 2023-10-26 17:49:54 发布

阅读量219

点赞数

分类专栏： JAVA 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41935315/article/details/105781422

版权

JAVA 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

动态表格

动态表格，全选
表单验证

动态表格，全选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;

        }
        .div1{
            margin-left: -30%;
        }
        .div2{
            margin: 50px auto;
        }
        table{
            margin: auto;
            width: 600px;
        }
        th,td{
            text-align: center;
            border: 1px solid skyblue;

        }
        .on{
           background-color:   skyblue;
        }
        .off{
            background-color: white;
        }
    </style>
    <script>
        window.onload = function () {
            //全选
            document.getElementById("selectedAll").onclick = function () {
                var choses = document.getElementsByName("chose");
                for(var i =0;i<choses.length;i++){
                    choses[i].checked = true;
                }
            }
            //反选
            document.getElementById("selected").onclick = function () {
                var chos = document.getElementsByName("chose");
                for(var i =0;i<chos.length;i++){
                    chos[i].checked = !chos[i].checked;
                }
            }
            //全部不选
            document.getElementById("selectedNot").onclick = function () {
                var chose = document.getElementsByName("chose");
                for(var i =0;i<chose.length;i++){
                       chose[i].checked = false;

                }
            }
            var v = document.getElementsByTagName("tr");
            for(var i =0;i<v.length;i++){
                v[i].onmouseover = function () {
                    this.className = "on"
                }
                v[i].onmouseout = function () {
                    this.className = "off";
                }
            }

        }
    </script>
</head>
<body>
<div class="div2">
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="sex" placeholder="请输入性别">
    <input type="button" id="add" value="添加">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="chose"></td>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="chose"></td>
        <td>2</td>
        <td>悟空</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
    </tr>

</table>
<div class="div1">
    <input type="button" id="selectedAll" value="全选">
    <input type="button" id="selected" value="反选">
    <input type="button" id="selectedNot" value="全不选">
</div>

<script>
    //获取按钮
    // document.getElementById("add").onclick = function () {
    //     //获取对应输入的值
    //     var id = document.getElementById("id").value;
    //     var name = document.getElementById("name").value;
    //     var sex = document.getElementById("sex").value;
    //     //创建对应td
    //     var td_id = document.createElement("td");
    //     var td_name = document.createElement("td");
    //     var td_sex = document.createElement("td");
    //     var td_a = document.createElement("td");
    //     //将获取的值转换为文本的形式
    //     var text_id = document.createTextNode(id)
    //     var text_name = document.createTextNode(name)
    //     var text_sex= document.createTextNode(sex)
    //     var es_a = document.createElement("a");
    //     es_a.setAttribute("href","javascript:void(0)");
    //     es_a.setAttribute("onclick","del(this)");
    //     var text_a = document.createTextNode("删除");
    //     es_a.appendChild(text_a);
    //     //将值加入td
    //     td_id.appendChild(text_id);
    //     td_name.appendChild(text_name);
    //     td_sex.appendChild(text_sex);
    //     td_a.appendChild(es_a);
    //     //创建tr将td加入其中
    //     var tr = document.createElement("tr");
    //     tr.appendChild(td_id);
    //     tr.appendChild(td_name);
    //     tr.appendChild(td_sex);
    //     tr.appendChild(td_a);
    //     //将tr加入table
    //     document.getElementsByTagName("table")[0].appendChild(tr);
    // }
    document.getElementById("add").onclick = function () {
        //获取对应输入的值
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML+=" <tr>\n" +
            "<td><input type=\"checkbox\" name=\"chose\"></td>\n"+
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+sex+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" οnclick=\"del(this);\">删除</a></td>\n" +
            "    </tr>"
    }
    function del(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        table.removeChild(obj.parentNode.parentNode);
    }

</script>
</body>
</html>

表单验证

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>

        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {

            background: url("img/2.jpg") center;

        }

        .register {
            width: 800px;
            height: 600px;
            border: 2px solid aquamarine;
            background-color: white;
            margin: 30px auto;
        }

        .register .rh_left {
            padding: 20px;
            float: left;
        }

        .rh_left > p:first-child {
            color: #E8D81A;
            font-size: 20px;
        }

        .rh_left > p:last-child {
            color: #272727;
            font-size: 20px;
        }

        .register .rg_center {

            float: left;
            padding-top: 20px;
            padding-left: 20px;
        }

        #username, #check, #birthiday, #name, #Email, #tel, #password {
            height: 30px;
            width: 200px;
            border-radius: 15px;
            border: 1px solid skyblue;
            margin: 10px 0;
            line-height: 30px ;
        }
        label {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }
        #td_sub {
            padding-left: 30px;
            color: skyblue;
        }

        .register .rg_center .png {
            height: 30px;
            vertical-align: middle;
        }

        .register .rg_right {
            padding-top: 20px;
            padding-right: 5px;
            float: right;
        }

        .rg_right p {
            font-size: 20px;
        }
        .error{
            color:red;
        }
    </style>
    <script>
        /*
       分析：
           1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
               如果都为true，则监听器方法返回true
               如果有一个为false，则监听器方法返回false

           2.定义一些方法分别校验各个表单项。
           3.给各个表单项绑定onblur事件。



    */
        window.onload = function () {
            document.getElementById("form").onsubmit = function () {
                return checkUsername()&&checkPassword();
            }
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        }

        function checkUsername() {
            var username = document.getElementById("username").value;
            var res = /^\w{6,8}$/;
            var flag = res.test(username);
            if(flag){
                document.getElementById("s_username").innerHTML ="<img width='35' height='30' src='img/1.jpg'/>";
                return true;
            }
            else {
                document.getElementById("s_username").innerHTML ="用户名格式错误";
                return false;
            }
        }
        function checkPassword() {
            var password = document.getElementById("password").value;
            var res = /^\w{6,12}$/;
            var flag = res.test(password);
            if(flag){
                document.getElementById("s_password").innerHTML ="<img width='35' height='30' src='img/1.jpg'/>";
                return true;
            }
            else {
                document.getElementById("s_password").innerHTML ="密码错误";
                return false;
            }
        }
    </script>
</head>
<body>
<div class="register">
    <div class="rh_left">
        <p>注册用户</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <form action="user_form" id="form" method="post">
            <table>
                <tr>
                    <td><label for="username">用户名</label></td>
                    <td><input type="text" name="username" id="username">
                        <span id="s_username" class="error"></span>
                    </td>

                </tr>
                <tr>
                    <td><label for="password">密码</label></td>
                    <td><input type="password" name="password" id="password"> <span id="s_password" class="error"></span></td>
                </tr>
                <tr>
                    <td><label for="Email">Email</label></td>
                    <td><input type="email" name="Email" id="Email"></td>
                </tr>
                <tr>
                    <td><label for="name">姓名</label></td>
                    <td><input type="text" name="name" id="name"></td>
                </tr>

                <tr>
                    <td><label for="tel">手机号</label></td>
                    <td><input type="tel" name="tel" id="tel"></td>
                </tr>
                <tr>
                    <td><label>性别</label></td>
                    <td>
                        <input type="radio" name="sex" value="male">男
                        <input type="radio" name="sex" value="female">女
                    </td>
                </tr>
                <tr>
                    <td><label for="birthiday">出生年月</label></td>
                    <td><input type="date" name="birthday" id="birthiday"></td>
                </tr>
                <tr>
                    <td><label for="check">验证码</label></td>
                    <td><input type="text" name="check" id="check"><img class="png" src="img/check.png" alt=""></td>
                </tr>
                <tr>
                    <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                </tr>

            </table>
        </form>
    </div>
    <div class="rg_right">
        <p>已有账号 <a href="#">立即登录</a></p>
    </div>
</div>
</body>
</html>