表格（新增，修改，删除，查询）-优快云博客

本文详细描述了一个HTML页面的结构，包括搜索框、新增功能、目录和数据输入，以及使用JavaScript实现的动态添加和删除数据的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
	<style>
		.seach{
		    width: 100%;
		    height: 85px;
		    display: flex;
		}
		.seach_one{
		    width: 350px;
		    height: 50px;
		    margin-top: 25px;
		    border-radius: 5px;
		    font-size: 24px;
		    border-color: rgba(18, 18, 18, 0.3);
		}
		.text{
		    font-size: 36px;
		    line-height: 100px;
		    margin-left: 30px;
		}
		.text_cha{
		    margin-left: 50px;
		    text-align: center;
		    width: 200px;
		    height: 100px;
		    line-height: 100px;
		    font-size: 30px;
		    border-radius: 20px;
		    color: white;
		}
		.New{
		    width: 100%;
		}
		.text_New{
		    width: 100px;
			height: 74px;
		    background-color: lightgreen;
		    font-size: 24px;
		    line-height: 75px;
			margin-left: 10PX;
		    color: white;
			cursor: pointer;
		    border-radius: 10px;
		}
		.directory{
		    width: 100%;
		    height: 75px;
		    display: flex;
		    background-color: rgba(250, 250, 250,1);
		    font-size: 32px;
		    line-height: 75px;
		}
		.one{
		    width: 14%;
		    text-align: center;
		}
		.data{
		    width: 100%;
		    height: 75px;
		    /* display: flex; */
		    background-color: white;
		    font-size: 32px;
		    line-height: 75px;
		}
		.boss_New{
		    width: 100%;
		    height: 100%;
		    background-color: rgb(18, 19, 19,0.1);
		    position: absolute;
		    top: 0px;
		    display: none;
		}
		.new_jia{
		    width: 1000px;
		    height: 800px;
		    background-color: white;
		    margin: 0 auto;
		    font-size: 32px;
		    overflow: hidden;
		}
		.new_jia div{
		    margin-top: 50px;
		    margin-left: 130px;
		}
		.new_jia input{
		    width: 460px;
		    height: 75px;
		    font-size: 36px;
		}
		.new_jia button{
		    margin-left: 98px;
		    width: 200px;
		    height: 100px;
		    font-size: 36px;
		}
		.btn {
			width: 100px;
			height: 74px;
			border-radius: 10%;
			font-size: 20px;
			cursor: pointer;
			color: #fff;
			margin-top: 10px;
			margin-left: 10px;
		}
	</style>
</head>
<body>
    <!-- 主体 -->
    <div class="boss">
        <!-- 搜索 -->
        <div class="seach">
            <div class="text">查询内容：</div>
            <input class="seach_one" type="text" placeholder="姓名/学号/手机号/班级">
            <button class="btn" style="background-color: skyblue;border: none;">查询</button>
			<button class="btn" style="background-color: coral;border: none;">重置</button>
        </div>
        <!-- 新增 -->
        <div class="New">
            <div class="text_New" onclick="func1()">
                + 新 增
            </div>
        </div>
        <!-- 序号目录 -->
        <div class="directory">
            <div class="one">序号</div>
            <div class="one">姓名</div>
            <div class="one">性别</div>
            <div class="one">学号</div>
			<div class="one">年龄</div>
            <div class="one">电话</div>
            <div class="one">创建时间</div>
            <div class="one">操作</div>
        </div>
        <!-- 数据 -->
        <div class="data">
            
        </div>
    </div>
    <!-- 新增的框 -->
    <div class="boss_New">
        <!-- 框 -->
        <div class="new_jia">
            <div>姓名：<input type="text1"></div>
            <div>性别：<input type="text2"></div>
            <div>学号：<input type="text3"></div>
            <div>年龄：<input type="text4"></div>
			<div>电话：<input type="text5"></div>
            <div>
                <button onclick="func2()">取消</button>
                <button style="background-color: blue;color: #fff;" onclick="func3()">确定</button>
            </div>
        </div>
    </div>
</body>
<script>
    let bossNew=document.getElementsByClassName("boss_New")[0];
    let newJia = document.getElementsByClassName("new_jia")[0];
    let data = document.getElementsByClassName("data")[0];
    console.log(data);
	message = {
		"number": number,
		"name": inputs[0].value,
		"age": inputs[1].value,
		'sex': inputs[2].value,
		'id': inputs[3].value,
	};
    function func1(){
        bossNew.style.display = "block"
    }
    function func2(){
        bossNew.style.display = "none"
    }
    function func3(){
        addBigdiv=document.createElement("div")
        for(let b=0;b<=7;b++){
            adddiv=document.createElement("div")
            adddiv.className = "one"
            addBigdiv.className = "directory"
            addBigdiv.appendChild(adddiv)
        }
        let text1 = newJia.children[0].children[0].value
        addBigdiv.childNodes[1].innerHTML=text1
        let text2 = newJia.children[0].children[0].value
        addBigdiv.childNodes[2].innerHTML=text2
        let text3 = newJia.children[0].children[0].value
        addBigdiv.childNodes[3].innerHTML=text3
        let text4 = newJia.children[0].children[0].value
        addBigdiv.childNodes[4].innerHTML=text4
		let text5 = newJia.children[0].children[0].value
		addBigdiv.childNodes[5].innerHTML=text5
        data.appendChild(addBigdiv)
        bossNew.style.display = "none"
    }
</script>
</html>