综合案例：渲染学生信息案例

最新推荐文章于 2024-03-10 13:02:46 发布
最新推荐文章于 2024-03-10 13:02:46 发布
阅读量136 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69096723/article/details/125212492
版权

<!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>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

 

<body>

    <h1>新增学员</h1>

    <div class="info">

        姓名：<input type="text" class="uname"> 年龄：

        <input type="text" class="age">

        性别:

        <select name="gender" id="" class="gender">

            <option value="男">男</option>

            <option value="女">女</option>

        </select>

        薪资：

        <input type="text" class="salary"> 就业城市：

        <select name="city" id="" class="city">

            <option value="北京">北京</option>

            <option value="上海">上海</option>

            <option value="广州">广州</option>

            <option value="深圳">深圳</option>

        </select>

        <button class="add">录入</button>

    </div>

 

    <h1>就业榜</h1>

    <table>

        <thead>

            <tr>

                <th>学号</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>薪资</th>

                <th>就业城市</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <!-- <tr> 

                <td>1001</td>

                <td>刘备</td>

                <td>19</td>

                <td>男</td>

                <td>15000</td>

                <td>上海</td>

                <td>

                    <a href="javascript:">删除</a>

                </td>

            </tr> -->

        </tbody>

    </table>

    <script>

        // 1. 准备阶段 利用 数组 模拟 数据

        let arr = [{

            stuId: 1001,

            uname: '刘备',

            age: 19,

            gender: '男',

            salary: '20000',

            city: '上海'

        }, {

            stuId: 1002,

            uname: '关羽',

            age: 29,

            gender: '男',

            salary: '30000',

            city: '北京'

        }, {

            stuId: 1003,

            uname: '张飞',

            age: 39,

            gender: '男',

            salary: '2000',

            city: '北京'

        }];

        //2.获取 tbody元素

        let tbody = document.querySelector('tbody');

        //添加数据按钮

        //获取录入按钮

        let add = document.querySelector('.add');

        //获取各个表单的元素

        let uname = document.querySelector('.uname');

        let age = document.querySelector('.age');

        let gender = document.querySelector('.gender');

        let salary = document.querySelectorAll('.salary');

        let city = document.querySelector('.city');

        //3.1借助for循环 遍历数组arr

        function render() {

            tbody.innerHTML = ''//让它为空

            for (var i = 0; i < arr.length; i++) {

 

                var tr = document.createElement('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].salary}</td>

                    <td>${arr[i].city}</td>

                    <td>

                        <a href="javascript:" id="${i}">删除</a>

                    </td>

                    `;

                //3.4把tr追加到tbody里面 父元素.appendChild(子元素)

                tbody.appendChild(tr);

            }

        }

        //页面加载就调用函数

        render();

        // 注册点击事件

        add.addEventListener('click', function () {

            // alert('测试');

            // 获得表单中的内容 添加到 arr push方法

            // arr.push('测试');

            // console.log(arr);

            arr.push({

                //得到数组最后一条数据的学号 ，1003再加1就是当前的学号

                stuId: arr[arr.length - 1].stuId + 1,

                uname: uname.value,

                age: age.value,

                gender: gender.value,

                salary: salary.value,

                city: city.value

            });

            //console.log(arr);

            render();//重新渲染我们的数据

            uname.value = age.value = salary.value = '';

            gender.value = '男';

            city.value = '北京';

        });

        //输出数组中的数据 需要用到事件委托 事件对象e

        tbody.addEventListener('click', function (e) {

            //我们只能点击了链接，才会执行输出操作

            //如何知道你点击了A?

            if (e.target.tagName === 'A') {

                arr.splice(e.target.id, 1);

                render();

                //再重新渲染我们的数据

            }

        })

    </script>

</body>

 

</html>

m0_69096723
关注
JS课堂作业 实现渲染学生信息
qq_59219560的博客
05-13 415
<!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>D.
动态创建表格【渲染学生信息案例】
KXJ
04-27 869
需求：点击录入按钮，可以增加学生信息 分析： 不管添加还是删除，都是操作的数据（数组），然后从新渲染页面 需求①：添加数据 点击录入按钮，把表单里面的值都放入数组里面 学号自动生成，是数组最后一个数据的学号+1 需求②：渲染 把数组的数据渲染到页面中，同时清空表单里面的值，下拉列表的值复原 注意，渲染之前，先清空以前渲染的内容 因为多次渲染，最好封装为函数 需求③：删除数据 为了提高性能，最好使用事件委托方式，找到点击的是链接 e.target.tagName 根据当前的删除链接，找到这条数据 需
渲染学生信息案例
qq_69105856的博客
05-17 172
//console.log(arr); //重复渲染页面 render(); //复原原始表单 置为默认内容 uname.value=age.value=salary.value=''; gender.value='男'; city.value='北京'; }); //删除数组中的数据 需要用到事件委托 事件对象e tbody....
js 渲染学生个人信息表
2203_75410429的博客
05-09 220
基于javaweb、mysql的 学生信息管理系统
11-24
【标题】"基于javaweb、mysql的 学生信息管理系统"揭示了这是一个使用...通过以上知识点的综合应用，"基于javaweb、mysql的 学生信息管理系统"实现了对学生数据的有效管理和维护，为教育领域的信息化提供了有力支持。
三维数字化技术综合应用教学课件案例：栅栏建模.pdf
06-08
通过这个案例，学生不仅可以掌握栅栏建模的具体技巧，还能锻炼到空间构图和场景布置的能力。同时，课程鼓励创新，提醒大家可以在场景中添加更多的元素，如不同种类的树木，以提升场景的多样性和复杂性，从而提高整体...
基于ThinkPHP学生宿舍公寓管理系统源码案例设计.zip
04-19
本文将深入解析一款名为"基于ThinkPHP学生宿舍公寓管理系统"的源码案例，旨在帮助开发者理解和学习如何利用ThinkPHP框架构建类似的系统，提升开发能力。 首先，ThinkPHP是一款广受欢迎的国产PHP开发框架，它以其...
基于springboot+vue的学生干部管理系统源码案例设计.zip
最新发布
04-20
总的来说，这个学生干部管理系统源码案例综合运用了SpringBoot和Vue.js两大主流框架，结合数据库设计、API设计、安全认证等多个IT知识点，为学习者提供了一个实践全栈开发的优质资源。对于想要提升Java后端和前端...
js实现学生信息表案例--详细教程
qq_180494790的博客
10-26 4503
2.点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？遍历数组，动态生成tr，里面填写对应的td数据，并追加给tbody。： 这个案例，减少了dom操作，采取操作数据的形式，增加和删除都是针对于数组的操作，然后根据数据渲染页面。3.注意书写的位置，应该放到新增数据的前面，阻止默认行为的后面。2.创建新的对象，里面存储 表单获取过来的数据。2.点击录入，根据相关数据，生成对象，追加到数组里面。4.点击删除按钮，删除的是对应数组里面的数据。5.再次根据数组的数据，渲染页面。
Node.js学习笔记-----day05 (使用MongonDB重写学生信息管理案例)
保持清醒
10-15 185
使用MongonDB重写学生信息管理案例 1. 显示首页 先在crud-demo目录下安装mongoose 改写student.js var mongoose = require('mongoose') mongoose.connect('mongodb://localhost/itcast', { useMongoClient: true }) var Schema = mongoose.Schema var studentSchema = new Schema({ name: {
使用js数组渲染学生信息
2301_79124729的博客
11-18 407
js渲染表格
渲染学生信息表
qq_42938698的博客
06-02 492
【代码】渲染学生信息表。
前后端分离(蜗牛学苑03)-学生列表渲染，新增学生界面及发送，删除学生，改造查询学生为按条件查询，模糊查询两种方式，获取并修改特定学生数据，新增班级，班级列表渲染，新增学生并关联班级，学生关联查询班级
weixin_43745804的博客
10-10 595
1、学生列表渲染 三个文件夹： 表现层：routers 服务层：service 持久层：dao（数据库访问接口） - 1、在表现层创建routers文件夹，创建对应的students路由： students.js var express = require('express'); var router = express.Router(); let students=[ {_id:1,name:'zhangsan',age:'20',gender:'male'}, {_id:2,name:'li
[附源码]计算机毕业设计Python高校学生信息采集系统(程序+源码+LW文档)
Django毕设程序杰哥
12-20 306
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Pychram社区版+py项目技术：django + python+ Vue 等等组成，B/S模式 +pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版本理论上也可以。2.pycharm环境：pycharm都可以。推荐pycharm社区版;3.mysql环境：建议是用5.7版本均可。
JS动态生成表格
syy的博客
11-06 1220
JavaScript实现动态表格以及删除功能
动态生成表格
Mr_115的博客
11-05 2106
动态生成表格
JS：学生信息表渲染案例
Saala的博客
03-10 483
JavaScript遍历数组对象练习案例
SpringBoot毕业设计项目：学生综合测评系统
资源摘要信息:"4123SpringBoot学生综合测评系统--（源码+数据库+lun文）.zip" ### 系统介绍 该学生综合测评系统是一个基于SpringBoot框架开发的Java Web应用程序，旨在为计算机专业的学生提供一个完整的毕业设计、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值