JavaScript简易学生信息管理

只想陪你吹海风

于 2023-06-18 10:23:56 发布

阅读量398

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_53162363/article/details/131269023

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
            border: 1px solid red;
            border-collapse: collapse;
            width: 700px;
        }
        
        td,
        th {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <input type="" name="" value="" class="xh" placeholder="学号">
    <input type="" name="" value="" class="xm" placeholder="姓名">
    <select>
        <option>男</option>
        <option>女</option>
    </select>
    <input type="" name="" value="" class="mz" placeholder="民族">
    <button type="">保存</button>

    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>民族</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>

        </tbody>
    </table>
    <script>
    let xh = document.querySelector('.xh');
    let xm = document.querySelector('.xm');
    let mz = document.querySelector('.mz');
    let tbody = document.querySelector('tbody');
    let but = document.querySelector('button');
    let option = document.querySelector('option');
    but.addEventListener('click', function () {
        // s = {
        //     xh: xh.value,
        //     name: mz.value,
        //     sex: option.value,
        //     mz: mz.value
        // }
        let a = document.createElement('tr');
        a.innerHTML = `<tr>
                        <td>${xh.value}</td>
                        <td>${xm.value}</td>
                        <td>${option.value}</td>
                        <td>${mz.value}</td>
                        <td><a href="#">删除</a></td>
        </tr>`;
        tbody.appendChild(a);

        tbody.addEventListener('click',function(e){
            tbody.removeChild(e.target.parentNode.parentNode);
        });
    });
</script>
</body>

</html>