当前位置：网站首页>DOM及其应用

DOM及其应用

2022-08-05 05:13:00 【长路漫漫大佬为伴】

DOM及其应用

1.编写一个登录页面，在客户端检验用户名和密码是否符合规范。
2.编写一个表格组件。要求二维表数据与表格显示分离，不使用任何框架。本题可作为课程考核开发项目。

1.编写一个登录页面，在客户端检验用户名和密码是否符合规范。

账户为：123
密码为：456

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com/" onsubmit="return fn()">
		    <input type="text" name="userName" />
		    <input type="password" name="passWord" />
		    <button type="submit" >点我</button>
		</form>
		<script>  
		    function fn() {
    
		        var flag=true;
		        var myUserName = document.querySelectorAll("input")[0];
		        var myPassWord = document.querySelectorAll("input")[1];
		        if (myUserName.value == "123") {
    
		            if (myPassWord.value == "456") {
    
		                alert("验证成功");
		                return flag;
		            }
		            else {
    
		                flag = false;
		                alert("密码错误，请重新输入");
		                return flag;
		            }
		        }
		        else {
    
		            flag = false;
		            alert("用户名错误，请重新输入！");
		            return flag;
		        }
		    }
		</script>
	</body>
</html>

运行截图：
在这里插入图片描述

在这里插入图片描述

2.编写一个表格组件。要求二维表数据与表格显示分离，不使用任何框架。本题可作为课程考核开发项目。

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript">

        window.onload = function(){
    
            //增加行
            var btn = document.getElementById("a");
            btn.onclick = function(){
    
                var table = document.getElementsByTagName("table")[0];
                add(table,"tr");
            }

            //删除行
            var a = document.getElementsByTagName("a");
            for(var i=0;i<a.length;i++){
    
                a[i].onclick =function(){
    
                    var parentTwo = this.parentNode.parentNode;
                    var parentThree = parentTwo.parentNode;
                    remove(parentTwo,parentThree);
                }
            }

            //鼠标移动修改颜色
            var tr = document.getElementsByTagName("tr");
            for(var i=0;i<tr.length;i++){
    
                tr[i].onmouseover = function(){
    
                    background(this,"red");
                };
                tr[i].onmouseout = function(){
    
                    background(this,"white");
                }
            }

        };

        //改变颜色的函数
        function background(obj,target){
    
            obj.style.background = target;
        }


        //删除的函数
        function remove(two,three) {
    
            three.removeChild(two);

        }

        //增加行中删除操作的函数
        function remover(obj) {
    
            var remove1=document.getElementById('table').childNodes[1];
            var remove2=obj.parentNode.parentNode;
            remove1.removeChild(remove2);
        }

        //增加行的函数
            function add(parent,child) {
    
                var newone=document.createElement("tr");//新增行
                newone.onmouseover = function(){
    
                    background(this,"red");
                };
                newone.onmouseout = function(){
    
                    background(this,"white");
                };
                var newone1=document.createElement("td");
                newone1.innerHTML="<td />";
                newone.appendChild(newone1);
                var newone2=document.createElement("td");
                newone2.innerHTML="<td />";
                newone.appendChild(newone2);
                var newone3=document.createElement("td");
                newone3.innerHTML="<a href='javascript:;' οnclick='remover(this)' >删除</a>";
                newone.appendChild(newone3);
                document.getElementById("table").childNodes[1].appendChild(newone);
            }

    </script>
</head>
<body>
<table border="1" width="50%" id="table">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>001</td>
        <td>张三</td>
        <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>002</td>
        <td>李四</td>
        <td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

</table>
<input id ="a" type="button" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
</body>
</html>