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

最新推荐文章于 2024-06-15 21:20:00 发布
最新推荐文章于 2024-06-15 21:20:00 发布
阅读量36 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69105510/article/details/124770818
版权

<!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>

                    删除

                </td>

            </tr> -->

        </tbody>

    </table>

    <script>

        

        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: '北京'

        }];

        

        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');

        

        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>

                        删除

                    </td>

                    `;

                

                tbody.appendChild(tr);

            }

        }

        

        render();

        

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

            

             console.log(arr);

            arr.push({

               

                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 = '北京';

        });

        

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

            

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

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

                render();

                

            }

        })

    </script>

</body>

 

</html>

qq_69105510
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学生信息管理系统， 实现学生信息包括：学号、姓名、性别、年龄、班级等信息
10-06
学生信息管理系统，实现学生信息包括：学号、姓名、性别、年龄、班级等信息。 小学生除了包括学生所有信息外，还包括英语、数学和语文成绩。 中学生除了包括小学生所有信息外，还包括地理、历史成绩、家庭住址等信息。 大学生除了包括学生所有信息外，还包括专业、家庭地址、联系方式等信息。 2、功能要求 （1）添加功能：（2）查询功能：（3）显示功能：（4）编辑功能：（5）删除功能：（6）统计功能：（7）保存功能：（8）读取功能：
动态创建表格【渲染学生信息案例】
KXJ
04-27 797
需求：点击录入按钮，可以增加学生信息 分析： 不管添加还是删除，都是操作的数据（数组），然后从新渲染页面 需求①：添加数据 点击录入按钮，把表单里面的值都放入数组里面 学号自动生成，是数组最后一个数据的学号+1 需求②：渲染 把数组的数据渲染到页面中，同时清空表单里面的值，下拉列表的值复原 注意，渲染之前，先清空以前渲染的内容 因为多次渲染，最好封装为函数 需求③：删除数据 为了提高性能，最好使用事件委托方式，找到点击的是链接 e.target.tagName 根据当前的删除链接，找到这条数据 需
渲染学生信息案例
qq_41619968的博客
05-12 227
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <h1>新增学员</h1> <div class="info"&.
JS课堂作业 实现渲染学生信息
qq_59219560的博客
05-13 383
<!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.
动态创建/删除表格内容
weixin_53758688的博客
05-12 209
表格内需初始有内容 <!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"> <
三维数字化技术综合应用案例：三维文字动画4 渲染动画.pdf
06-08
三维数字化技术综合应用— — 案例：三维文字动画4 － 渲染动画 渲染动画 上次课我们学习了如何制作文字飞入画面并 逐渐放大的动画效果，这次课我们来学习如 何渲染动画。渲染动画是一个从模型生成图 像的过程，这个...
崩坏3卡通渲染Unity案例
11-11
包含崩坏3人物模型和ToonShader，崩坏3人物渲染采用修改过的Half Lambert光照模型，辅以双层阴影，使用顶点色及输入的纹理调节阴影显示。后处理包括Bloom 和 FXAA。具体技术细节可参考压缩包内文档。
OpenGL案例双面渲染
06-15
本课程为案例课程，展示的效果为渲染OpenGL的前后两个面。一般情况下，我们只是渲染了模型的正面，默认情况下，在OpenGL中就是逆时针方向绘制出来的面。本案例展示了如何去把内表面也渲染出来。案例课程中大部分甚至...
三维数字化技术综合应用案例：三维文字动画2 设置材质及渲染背景.pdf
06-08
三维数字化技术综合应用— — 案例：三维文字动画2 － 设置材质及渲染背景 设置材质及渲染背景 上次课我们学习了三维文字动画中 三维文字模型的创建方法。为了丰 富动画的视觉效果，这节课我们将 给模型指定材质，并...
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
学生列表页的实现
qq_41283785的博客
08-07 271
地址：[https://www.showdoc.com.cn/jinducasey/8321036098744323]登录的用户名和密码符合校验规则即可(用户名:admin,密码1qaz!带边框的表格的el-table -->template->div。1 打开element-ui。密码：jinduVIP。
前后端分离(蜗牛学苑03)-学生列表渲染，新增学生界面及发送，删除学生，改造查询学生为按条件查询，模糊查询两种方式，获取并修改特定学生数据，新增班级，班级列表渲染，新增学生并关联班级，学生关联查询班级
weixin_43745804的博客
10-10 550
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
(学习笔记)Laravel foreach的使用
qq_56508310的博客
03-27 1224
在视图中使用foreach遍历学生信息 一、效果图 二、代码部分 1.PhotoController.php class PhotoController extends Controller{ public $students=[('引入学生信息')]; @return \Illuminate\Http\Response public function index(){ $students=$this->students; $id=null; $xi
JAVA中dot的用法_doT学习（一）之语法
weixin_28706423的博客
02-28 1399
简介创建搜索最快和简洁的JavaScript模板函数，强调V8和nodejs下的性能，它在nodejs和浏览器上都显示了很好的性能。dot.js速度快，体积小，没有依赖关系，源js代码只有140行特性无依赖极其快速自定义定界符 (custom delimiters)运行时求值 (runtime evaluation)运行时插值 (runtime interpolation)编译时求值 (compi...
用html做一个学生信息表,制作一个表格，显示班级的学生信息。
weixin_39791322的博客
06-03 2317
new document window.onload = function(){var tr = document.getElementsByTagName("tr");for(var i =0;i<=tr.length-1;i++){changeBC(tr[i]);}}function changeBC(obj){console.log("1234");obj.onmouseover =...
实现渲染学生信息案例
hy_3504965117的博客
05-19 101
<!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>Do.
doT.js模板引擎（附案例）
客官不爱喝酒的博客
06-17 1008
doT简介插件： doT.js模板引擎,它的大小只有4KB，渲染性能很好，而且直接支持原生的写法，不用依赖别的库，也可以用jQuery等库使用。 模板引擎可以让（网站）实现界面与数据分离，这就大大提升了开发效率，良好的设计也使得代码复用变得更加容易。 使用前注意事项：需要引入这样一个插件。下载地址：https://github.com/olado/doT 需要注意改模板的Type属性值，不是js代码书写标签。 1.直接赋值法： <!DOCTYPE html> <html> &l
HTML DOM 事件
lsx202406的博客
06-13 482
HTML DOM（文档对象模型）事件是当网页中的某些操作发生时，浏览器会自动触发或通过脚本代码手动触发的动作。这些事件可以是对用户操作的响应，如点击按钮，也可以是浏览器自身的动作，如页面加载完成。理解和掌握DOM事件对于前端开发至关重要，因为它们是实现动态交互和响应用户行为的核心。
HTML前端
最新发布
2302_77125952的博客
06-15 352
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。提供许多标签，不同标签功能不同，网页就是通过这些标签描述出来的，最终由浏览器解释运行我们看到的网页。HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。<标签 属性=“ ”/>完成一个特定的设置功能，没有标签体 换行标签。<开始标签>标签名</结束标签> 闭合标签（双标签）标签中可以有属性：可以标签属性。table标签：表格标签。tr标签：表格中的行。td标签：表格单元格。
PHP服务器渲染3D模型代码案例
06-10
// 创建Three.js场景和渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer({...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值