学生信息表

目录

一、功能说明

二、核心思想

三、所用知识回顾

四、基本框架

五、js功能实现部分


一、功能说明

(1)输入对应的信息,点击录入可以为下面的表格添加一条记录,注意当所填信息不完整时不允许进行提交。

(2)当点击删除记录的时候,对应的数据会从表中进行删除

二、核心思想

采取减少dom的操作,操作数据的形式,删除增加都是针对于数组

(1)声明一个空的数组

(2)点击录入,根据相关数据,生成都西昂,追加到数组中

(3)根据数组数据渲染页面-表格中的行

(4)点击删除按钮,删除数组中的对应数据

(5)再次根据数组中的数据,渲染页面

三、所用知识回顾

(1)阻止事件的默认行为  e.preventDefault()

(2)给数组增加元素 数组名.push(数据对象)

(3)从数组中删除数据  数组名.splice(从哪开始删,删几个)

(4)如何知道当前点击的是什么标签   e.target.tagName

(5)如何定义自定义属性  在标签中加入data-id='什么' ;用e.target.dataset.id获取自定义属性的id值

(6)如何创建结点  document.createElement(‘元素名’)

(7)如何给父元素追加结点   父元素.appendChild(要插入的元素)其为后插 ;父元素.insertBefore(要插入的元素)其为前插

(8)如何将内容渲染到标签中,用反引号``

四、基本框架

HTML部分

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名:<input type="text" class="uname" name="uname" />
    年龄:<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资:<input type="text" class="salary" name="salary" />
    就业城市:<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <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>
</body>

CSS部分

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color:#721c24;
}
h1 {
  text-align: center;
  color:#333;
  margin: 20px 0;
 
}
table {
  margin:0 auto;
  width: 800px;
  border-collapse: collapse;
  color:#004085;
}
th {
  padding: 10px;
  background: #cfe5ff;
  
  font-size: 20px;
  font-weight: 400;
}
td,th {
  border:1px solid #b8daff;
}
td {
  padding:10px;
  color:#666;
  text-align: center;
  font-size: 16px;
}
tbody tr {
  background: #fff;
}
tbody tr:hover {
  background: #e1ecf8;
}
.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}
.info  input, .info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border:1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}
.info button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.info .age {
  width: 50px;
}

五、js功能实现部分

 

<script>
    // 获取表单中的元素 
    const uname=document.querySelector('.uname')
    const age=document.querySelector('.age')
    const gender=document.querySelector('.gender')
    const salary=document.querySelector('.salary')
    const city=document.querySelector('.city')
    const tbody=document.querySelector('tbody')
    // 获取所有带有name属性的标签
    const items=document.querySelectorAll('[name]')
    // 声明一个数组
    const arr=[]
    // 获取表单对象
    const info=document.querySelector('.info')
    // 监听表单提交事件
    info.addEventListener('submit',function(e){
      // 阻止表单的默认行为
      e.preventDefault()
      // 进行表单的验证,不过不通过直接中断,
      //方法,利用除了提交都有一个name属性,可以获取name,for循环如果有空则return结束 循环
     for(let i=0;i<items.length;i++){
      if(items[i].value===''){
        return
      }
     }

    // 创建对象,相当于每个学生
      const obj={
      stuId:arr.length+1,
      uname:uname.value,
      age:age.value,
      gender:gender.value,
      salary:salary.value,
      city:city.value
    }
    // 将对象追加给数组
    arr.push(obj)
    // console.log(arr)
    // 提交后清空表单
     this.reset()
    // // 调用渲染函数
     render()
    })
 
    // 渲染函数,因为删除和增加都需要渲染
    function render(){
      // 如果这样写,则每次都会把所有的arr中的数据在原来的基础上又重新加了一次
      //则应该每次渲染前把tbody清空
      tbody.innerHTML=''
      for(let i=0;i<arr.length;i++){
        // 每次渲染是多了行,则需要先创建 tr
        const 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:" data-id='${i}'>删除</a>
          </td>
        `
         // 将tr追加到父元素tbody中
         tbody.appendChild(tr)

      }
    }


// 进行删除操作
//删除在a里面,但是有多个删除,每个都绑定事件麻烦,可以委托给父级元素,唯一可以表示的有tbody
//但是只有点击a的时候才会删除,所有需要if再判断一下点击的哪一个
tbody.addEventListener('click',function(e){
  if(e.target.tagName==='A'){
    // 如何知道当前想要删除的是哪条数据,可以用自定义属性,在生成a时
    // console.log(e.target.dataset.id)
    // 删除数组中对应的数据
    arr.splice(e.target.dataset.id,1)
    // 数组中元素少了则重新 渲染
    render()
  }
})

   
  </script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/220.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

UE实现建筑生长(材质遮罩方式)效果

文章目录 1.实现目标2.实现过程2.1 遮罩2.2 生长动画3.参考资料1.实现目标 在UE中实现建筑的生成动画效果,GIF动图如下: 2.实现过程 通过动态设置材质遮罩OpacityMask的参数,即通过材质方式来实现建筑生长效果 2.1 遮罩 现有的教程中大多通过BoxMask-3D材质节点实现,但是…

扫地机器人(蓝桥杯C/C++)

题目描述 小明公司的办公区有一条长长的走廊&#xff0c;由 NN 个方格区域组成&#xff0c;如下图所示。 走廊内部署了 KK 台扫地机器人&#xff0c;其中第 ii 台在第 A_iAi​ 个方格区域中。已知扫地机器人每分钟可以移动到左右相邻的方格中&#xff0c;并将该区域清扫干净。…

Linux信号

目录 信号入门 1. 生活角度的信号 2. 技术应用角度的信号 3. 注意 4. 信号概念 5. 用kill -l命令可以察看系统定义的信号列表 6. 信号处理常见方式概览 产生信号 1. 通过终端按键产生信号 2. 调用系统函数向进程发信号 3. 由软件条件产生信号 4. 硬件异常产生信号 核…

DHCP原理简析及交互实践

环境&#xff1a; os&#xff1a;centos7 dnsmasq&#xff1a;version 2.76 一. dhcp工作原理 首先补充几个dhcp相关的基本概念&#xff1a; 1、动态主机配置协议DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种网络管理协议&#xff0c;用于集中对用…

程序员必会技能—— 使用日志

目录 1、为什么要使用日志 2、自定义日志打印 2.1、在程序中得到日志对象 2.2、使用日志对象打印日志 2.3、日志格式 3、日志的级别 3.1、日志级别的分类 3.2、日志级别的设置 4、持久化日志 5、更简单的日志输出——lombok 5.1、如何在已经创建好的SpringBoot项目中添加…

Python+ChatGPT实战之进行游戏运营数据分析

文章目录一、数据二、目标三、解决方案1. DAU2. 用户等级分布3. 付费率4. 收入情况5. 付费用户的ARPU最近ChatGPT蛮火的&#xff0c;今天试着让ta写了一篇数据分析实战案例&#xff0c;大家来评价一下&#xff01;一、数据 您的团队已经为您提供了一些游戏数据&#xff0c;包括…

MySQL数据库的基础语法总结(1)

MySql一.数据库,数据表的基本操作1.数据库的基本操作2. 数据表的基本操作2.1 数据库的数据类型2.1.1 整数类型2.1.2 浮点数类型和定点数类型2.1.3 字符串类型2.1.4 日期与时间类型2.2 数据表的基本操作2.2.1 创建一个数据表2.2.2 查看数据表2.2.3 查看表的基本信息的MySQL指令2…

【拳打蓝桥杯】最基础的数组你真的掌握了吗?

文章目录一&#xff1a;数组理论基础二&#xff1a;数组这种数据结构的优点和缺点是什么&#xff1f;三&#xff1a;数组是如何实现随机访问的呢&#xff1f;四&#xff1a;低效的“插入”和“删除”原因在哪里&#xff1f;五&#xff1a;实战解题1. 移除元素暴力解法双指针法2…

前端开发神器VS Code安装教程

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端 &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f4ac;个人格言&#xff1a;但行好事&#xff0c;莫问前程 安装VS CodeVS Code简介VS Code安装VS Code汉化结束语&#x1f4a1;&#x1f4a1;&…

嵌入式学习笔记——STM32的USART收发字符串及串口中断

USART收发字符串及串口中断前言字符串的收发发送一个字符串接收字符串需求利用串口实现printf中断中断是什么前言 上一篇中&#xff0c;介绍了串口收发相关的寄存器&#xff0c;通过代码实现了一个字节的收发&#xff0c;本文接着上面的内容&#xff0c;通过功能函数实现字符串…

Elasticsearch:集群管理

在今天的文章中&#xff0c;我们应该学习如何管理我们的集群。 备份和分片分配是我们应该能够执行的基本任务。 分片分配过滤 Elasticsearch 将索引配到一个或多个分片中&#xff0c;我们可以将这些分片保存在特定的集群节点中。 例如&#xff0c;假设你有多个数据集群节点&am…

项目实战-瑞吉外卖day02(B站)持续更新

瑞吉外卖-Day02课程内容完善登录功能新增员工员工信息分页查询启用/禁用员工账号编辑员工信息分析前端页面效果是如何实现的为什么点击左边 右边会根着变化首先 我们先来看一下菜单是如何展示出来的 在来看一下 为啥点击菜单时 右边会跟着变第一 &#xff1a;菜单是如何展示出来…

【剑指offer-C++】JZ32:从上往下打印二叉树

题目描述 描述&#xff1a;不分行从上往下打印出二叉树的每个节点&#xff0c;同层节点从左至右打印。例如输入{8,6,10,#,#,2,1}&#xff0c;如以下图中的示例二叉树&#xff0c;则依次打印8,6,10,2,1(空节点不打印&#xff0c;跳过)&#xff0c;请你将打印的结果存放到一个数…

我用Python写了一个下载网站所有内容的软件,可见即可下,室友表示非常好用

Python 写一个下载网站内容的GUI工具&#xff0c;所有内容都能下载&#xff0c;真的太方便了&#xff01;前言本次要实现的功能效果展示代码实战获取数据GUI部分最后前言 哈喽大家好&#xff0c;我是轻松。 今天我们分享一个用Python写下载视频弹幕评论的代码。 之前自游写了…

计算机网络复习

什么是DHCP和DNS DNS(Domain Name System&#xff0c;域名系统)&#xff0c;因特网上作为域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使用户更方便的访问互联网&#xff0c;而不用去记住能够被机器直接读取的IP数串。通过主机名&#xff0c;最终得到该主机名对应的…

ARM uboot 的移植4 -从 uboot 官方标准uboot开始移植

一、添加DDR初始化1 1、分析下一步的移植路线 (1) cpu_init_crit 函数成功初始化串口、时钟后&#xff0c;转入 _main 函数&#xff0c;函数在 arch/arm/lib/crt0.S 文件中。 (2) 在 crt0.S 中首先设置栈&#xff0c;将 sp 指向 DDR 中的栈地址&#xff1b; #if defined(CONF…

被骗进一个很隐蔽的外包公司,入职一个月才发现,已经有了社保记录,简历污了,以后面试有影响吗?...

职场的套路防不胜防&#xff0c;一不留神就会掉坑&#xff0c;一位网友就被“骗”进了外包公司&#xff0c;他说公司非常隐蔽&#xff0c;入职一个月才发现是外包&#xff0c;但已经有了社保记录&#xff0c;简历污了&#xff0c;不知道对以后面试有影响吗&#xff1f;楼主说&a…

【含源码】用python做游戏有多简单好玩

有很多同学问我还有其他什么小游戏吗&#xff0c;游戏是怎么做的&#xff0c;难不难。我就用两篇文章来介绍一下&#xff0c;如何使用Python做游戏。 兔子与灌 俄罗斯方块 休闲五子棋 走迷宫 推箱子 消消乐 超多小游戏玩转不停↓ 更多小游戏可以评论区讨论哦&#xff0c;喜欢…

保姆级使用PyTorch训练与评估自己的Replknet网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;https://www.bilibili.co…

【C++】模板进阶

模板进阶 文章目录模板进阶1、非类型模板参数2、模板的特化2.1.概念2.2.函数模板特化2.3.类模板特化2.3.1.全特化2.3.2.偏特化2.4.类模板特化示例3、模板总结1、非类型模板参数 模板参数分类类型形参与非类型形参。类型模板参数&#xff1a;出现在模板参数列表中&#xff0c;跟…
最新文章