javascript+css学生信息表综合案例（附详细代码）

最新推荐文章于 2024-01-15 19:23:49 发布

铃儿响叮当不响

最新推荐文章于 2024-01-15 19:23:49 发布

阅读量3.1k

点赞数 6

分类专栏：前端js笔记文章标签： javascript html 前端 css

本文链接：https://blog.csdn.net/qq_36507046/article/details/125826383

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

本文主要实现：通过获取input框value值，并将数据渲染到表格中，自动生成对应的学生信息表，同时可以删除相应的信息。

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .add_info {
            margin: 0 auto;
            width: 700px;
            height: 160px;
            text-align: center;
            background-color: antiquewhite;
            font-size: 14px;
        }

        h2 {
            line-height: 100px;
        }

        ul {
            list-style: none;
             /* 让ul居中 */
            margin: 0 auto;
        }

        li {
            display: inline;
        }

        .name {
        border: 1px solid skyblue;
        border-radius: 3px;
        width: 60px;
        margin-right: 20px;
        }

        .hobby{
        border: 1px solid skyblue;
        border-radius: 3px;
        width: 80px;
        margin-right: 20px;
        }

        .name:focus,.age:focus,.hobby:focus {
        outline: none;
        border: 1px solid deepskyblue;
        }

        .age {
        border: 1px solid skyblue;
        border-radius: 3px;
        width: 30px;
        margin-right: 20px;
        }
        
        .sub {
         background-color: deepskyblue;
         border: 1px solid white;
         border-radius: 3px;
         width: 40px;
         color:white;
         line-height: 20px;
        }

        .sub:hover {
            background-color: rgb(88, 88, 227);  
        }

        #hometown, #sex {
            margin-right: 10px;
        }
        
        table {
        border-spacing: 0;
        border: 1px solid #ccc;
        width: 700px;
        text-align: center;
        /* 让表格居中 */
        margin: 0 auto;
        border-top: 0;
        }

        .table_head {
        background-color: whitesmoke;
        }

        th {
            width: 100px;
            height: 30px;
            text-align: center;
            font-size: 13px;
            line-height: 15px;
        }

        td {
        border-spacing: 0;
        padding: 0;
        border: 1px solid #ccc;
        text-align: center;
        height: 30px;
        border-bottom: 0;
        border-left: 0;
        }

        a{
	   text-decoration: none;
       color: #333;
       /* 清楚链接下划线与颜色 */
       }

       .table_body tr:hover {
        background-color: ghostwhite;
       }
    </style>

</head>
<body>
    <div>
        <div class="add_info">
            <h2>学生信息录入</h2>
            <ul>
                <li>
                 姓名:<input class="name" type="text">
                </li>
                <li>
                年龄:<input class="age" type="text">
                </li>
                <li>
                性别: <select id="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                </li>
                <li>
                兴趣爱好:<input class="hobby" type="text">
                </li>
                <li>
                 家乡: <select id="hometown">
                    <option value="上海">上海</option>
                    <option value="北京">北京</option>
                    <option value="武汉">武汉</option>
                    <option value="长沙">长沙</option>
                    <option value="南京">南京</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                    <option value="杭州">杭州</option>
                    <option value="合肥">合肥</option>
                    <option value="天津">天津</option>
                </select>
                </li>
                <li>
                <button class="sub">录入</button>
                </li>
            </ul>
        </div>
        <div class="student_info">
            <table>
                <thead>
                   <tr class="table_head">
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>兴趣爱好</th>
                    <th>家乡</th>
                    <th>选项</th>
                   </tr>
                </thead>
                <tbody class="table_body">
              </tbody>
            </table>
        </div>
    </div>

     <script>
         // 准备好数据后端
        let arr = [
           {stuId: 1001, uname: '丽丽', age: 19, gender: '女', hobby: '唱歌', hometown: '上海'},
           {stuId: 1002, uname: '亮亮', age: 20, gender: '男', hobby: '滑冰', hometown: '武汉'},
           {stuId: 1003, uname: '小蒋', age: 18, gender: '男', hobby: '街舞', hometown: '北京'},
           {stuId: 1004, uname: '芳芳', age: 21, gender: '女', hobby: '芭蕾', hometown: '长沙'},
        ]
        // 获取父元素
        let table_body = document.querySelector('.table_body')
         // 添加按钮录入数据
        // 获取录入按钮
        let sub = document.querySelector('.sub')
        // 获取表单元素
        let name = document.querySelector('.name')
        let age = document.querySelector('.age')
        let sex = document.querySelector('#sex')
        let hobby = document.querySelector('.hobby')
        let hometown = document.querySelector('#hometown')

        // 渲染函数 把数组里的最新数据渲染到页面中
        function render(){
            // 先删掉tbody以前的数据再渲染新的数据
            table_body.innerHTML = ''          
          // 根据数据的条数来渲染增加 tr
          for(let i = 0; i < arr.length; i++){
             // 1、创建tr
             let tr = document.createElement('tr')
            // 2、tr里面放内容
            tr.innerHTML = `
                    <td>${arr[i].stuId}</td>
                    <td>${arr[i].uname}</td>
                    <td>${arr[i].age}</td>
                    <td>${arr[i].gender}</td>
                    <td>${arr[i].hobby}</td>
                    <td>${arr[i].hometown}</td>
                    <td>
                    <a href="#" id="${i}">删除</a>
                    </td>
            `
            // 3、把tr追加到tbody 父元素.appendChild(子元素)
            table_body.appendChild(tr)
           // 渲染完后复原数据
            name.value = ''
            age.value = ''
            sex.value = '男'
            hometown.value  = '上海'
          }
        }
        render()

        sub.addEventListener('click',function(){
            // 获得表单里的值 把获取到的值追加到数组里面 arr.push()
            arr.push(
                {
                //得到数组的最后一条数据的学号+1
                stuId: arr[arr.length - 1].stuId + 1,
                uname: name.value, 
                age: age.value, 
                gender: sex.value, 
                hobby: hobby.value, 
                hometown: hometown.value
                  }
                )
             // 渲染数据
            render()
        })

        // 删除操作 使用事件委托的方法 不用给每个元素都绑定点击事件
        // 删除的也是数组里面的数据
        table_body.addEventListener('click',function(e){
             // 只有当我们点击了a链接才会执行删除操作
            if ( e.target.tagName === 'A') {
                // 做删除操作，即删除数组里面的数据 arr.splice()
                // 怎么确定删除的数据是哪一个
                //  <a href="#" id="${i}">删除</a> 给a 加上索引号
                // console.log(e.target.id)
                arr.splice(e.target.id,1)
                render()
            }
        })
     </script>

</body>
</html>

效果图如下：