JavaScript基础(26)_dom增删改练习

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>DOM增删改练习</title><link rel="stylesheet" href="../browser_default_style/reset.css"><style>table {border: 1px black solid;/* 表格边框合并 */border-collapse: collapse;margin-top: 20px;margin-left: 20px;}thead {background-color: aquamarine;}td {border: 1px black solid;font-size: large;text-align: center;vertical-align: middle;width: 80px;height: 22px;}tr>td:nth-of-type(2) {width: 180px;}a {color: blue;text-decoration: none;}form {border: 1px black solid;width: 320px;height: 230px;margin-left: 20px;}.title {display: flex;width: 100%;height: 80px;font-weight: bolder;font-size: large;align-items: center;justify-content: center;}li {list-style: none;margin: -10px 0px 0px 20px;}.button_position {display: flex;align-items: center;justify-content: center;}#add_info {display: flex;width: 100px;height: 30px;align-items: center;justify-content: center;}</style><script>// 创建一个 "删除一行表格数据" 功能的函数function delete_tr() {// this指向当前调用方法的对象，即：all_anchor[i]。var tr = this.parentNode.parentNode;// 类似于：var name_td = tr.getElementsByTagName("td")[0].innerHTML;var name_td = tr.children[0].innerHTML;var flag = confirm("你确实要删除" + name_td + "吗？");if (flag) {tr.parentNode.removeChild(tr);}// 结束onclick事件跳转，结束语句执行。// 此代码也适用于取消超链接的默认行为，相当于：href = "javascript:;"。return false;}window.onload = function () {// 实现删除 "当前表格数据" 按钮功能var all_anchor = document.getElementsByTagName("a");for (var i = 0; i < all_anchor.length; i++) {// 赋值对象内容而不是赋值返回值，所以不需要带();all_anchor[i].onclick = delete_tr;}// 获取 "添加信息" 按钮、找到表格、表身体var add_info = document.getElementById("add_info");var table = document.getElementsByTagName("table")[0];var tbody = document.getElementsByTagName("tbody")[0];add_info.onclick = function () {// 定义变量接收来自 "用户的输入值"。// 注意：表单文本框内的属性不能用innerHTML，只能用value。var name = document.getElementsByClassName("name")[0].value;var email = document.getElementsByClassName("email")[0].value;var salary = document.getElementsByClassName("salary")[0].value;// 根据表的节点树，开始创造节点：// <tbody>//     <tr>//         <td>Tom</td>//         <td>tom@tom.com</td>//         <td>5000</td>//         <td><a href="">删除</a></td>//     </tr>// </tbody>// 创建文本节点对象，把用户的输入值赋值给文本节点对象var name_textnode = document.createTextNode(name);var email_textnode = document.createTextNode(email);var salary_textnode = document.createTextNode(salary);var author_textnode = document.createTextNode("删除");// 创建a元素、添加:href属性var a = document.createElement("a");a.href = "javascript:;";// 给 "超链接a、对应文本节点" 建立父子关系a.appendChild(author_textnode);// 创建tr、td元素var tr = document.createElement("tr");var name_td = document.createElement("td");var email_td = document.createElement("td");var salary_td = document.createElement("td");var author_td = document.createElement("td");// 给 "各单元格td、对应文本节点、超链接a" 建立父子关系name_td.appendChild(name_textnode);email_td.appendChild(email_textnode);salary_td.appendChild(salary_textnode);author_td.appendChild(a);// 给tbody、tr、td元素建立父子关系。// 没写thead、tbody、tfoot时，编译器会自动添加, 所以记得是tbody而不是table。tr.appendChild(name_td);tr.appendChild(email_td);tr.appendChild(salary_td);tr.appendChild(author_td);tbody.appendChild(tr);// 实现删除 "添加信息后的当前表格数据" 的按钮功能var all_anchor = document.getElementsByTagName("a");for (var i = 0; i < all_anchor.length; i++) {all_anchor[i].onclick = delete_tr;}}}</script>
</head><body><table><thead><tr><td>姓名</td><td>邮件</td><td>工资</td><td>&nbsp</td></tr></thead><tbody><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="">删除</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="">删除</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="">删除</a></td></tr></tbody></table><br><br><form action=""><div class="title">添加新员工</div><ul><li>姓名：<input type="text" class="name"></li> <br><li>邮件：<input type="text" class="email"></li> <br><li>工资：<input type="text" class="salary"></li> <br></ul><div class="button_position"><input type="button" value="添加信息" id="add_info"></div></form></body></html>

用传统造节点的方式会使得JS部分代码臃肿，逻辑复杂。因此可将JS代码优化，效果如下：

 <script>// 创建一个 "删除一行表格数据" 功能的函数function delete_tr() {// this指向当前调用方法的对象，即：all_anchor[i]。var tr = this.parentNode.parentNode;// 类似于：var name_td = tr.getElementsByTagName("td")[0].innerHTML;var name_td = tr.children[0].innerHTML;var flag = confirm("你确实要删除" + name_td + "吗？");if (flag) {tr.parentNode.removeChild(tr);}// 结束onclick事件跳转，结束语句执行。// 此代码也适用于取消超链接的默认行为，相当于：href = "javascript:;"。return false;}window.onload = function () {// 实现删除 "当前表格数据" 按钮功能var all_anchor = document.getElementsByTagName("a");for (var i = 0; i < all_anchor.length; i++) {all_anchor[i].onclick = delete_tr;}// 获取 "添加信息" 按钮、找到表格、表身体var add_info = document.getElementById("add_info");var table = document.getElementsByTagName("table")[0];var tbody = document.getElementsByTagName("tbody")[0];add_info.onclick = function () {// 定义变量接收来自 "用户的输入值"。// 注意：表单文本框内的属性不能用innerHTML，只能用value。var name = document.getElementsByClassName("name")[0].value;var email = document.getElementsByClassName("email")[0].value;var salary = document.getElementsByClassName("salary")[0].value;var tr = document.createElement("tr");tr.innerHTML = "<td>" + name + "</td>"+ "<td>" + email + "</td>"+ "<td>" + salary + "</td>"+ "<td><a href='javascript:;'>删除</a></td>";tbody.appendChild(tr);// 此方式也能实现效果，但有以下缺点：// 1、添加信息更改了整个表身的全部数据。降低效率。// 2、原先设置表身数据的样式或程序可能会失效。// tbody.innerHTML += "<tr>" + "<td>" + name + "</td>"//     + "<td>" + email + "</td>"//     + "<td>" + salary + "</td>"//     + "<td><a href='javascript:;'>删除</a></td>"//     + "</tr>";// 实现删除 "添加信息后的当前表格数据" 的按钮功能var all_anchor = document.getElementsByTagName("a");for (var i = 0; i < all_anchor.length; i++) {all_anchor[i].onclick = delete_tr;}}}</script>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue路由及参数router

vue路由及参数router

目录 vue项目版本1、创建一个vue项目步骤 &#xff08;windows环境下&#xff09;。创建vue项目前&#xff0c;检查系统是否具备创建项目的条件&#xff08;是否已经安装好了node.js、webpack、vue-cli&#xff09;。cmd打开终端。2、vue路由vue-router解说2.1 路由视图<rou…
阅读更多...
【GDAL】Windows下VS+GDAL开发环境搭建

【GDAL】Windows下VS+GDAL开发环境搭建

Step.0 环境说明&#xff08;vs版本&#xff0c;CMake版本&#xff09; 本地的IDE环境是vs2022&#xff0c;安装的CMake版本是3.25.1。 Step.1 下载GDAL和依赖的组件 编译gdal之前需要安装gdal依赖的组件&#xff0c;gdal所依赖的组件可以在官网文档找到&#xff0c;可以根据…
阅读更多...
Kafka（七）可靠性

Kafka（七）可靠性

目录 1 可靠的数据传递1.1 Kafka的可靠性保证1.2 复制1.3 Broker配置1.3.1 复制系数1.3.2 broker的位置分布1.3.3 不彻底的首领选举1.3.4 最少同步副本1.3.5 保持副本同步1.3.6 持久化到磁盘flush.messages9223372036854775807flush.ms9223372036854775807 1.2 在可靠的系统中使…
阅读更多...
Netty开篇——基础介绍与准备（一）

Netty开篇——基础介绍与准备（一）

I/O篇 Netty的介绍 Netty 是由JBOSS提供的一个Java开源框架在Github上Netty 是一个异步的、基于事件驱动的网络应用框架&#xff0c;用以快速开发高性能、高可靠性的网络IO程序。Netty 主要针对在TCP协议下面向客户端的高并发应用&#xff0c;或者Peer-to-Peer/P2P场景下的大量…
阅读更多...
day17 平衡二叉树 二叉树的所有路径 左叶子之和

day17 平衡二叉树 二叉树的所有路径 左叶子之和

题目1&#xff1a;110 平衡二叉树 题目链接&#xff1a;110 平衡二叉树 题意 判断二叉树是否为平衡二叉树&#xff08;每个节点的左右两个子树的高度差绝对值不超过1&#xff09; 递归遍历 递归三部曲 1&#xff09;确定递归函数的参数和返回值 2&#xff09;确定终止条…
阅读更多...
数据结构链表完整实现（负完整代码）

数据结构链表完整实现（负完整代码）

文章目录 前言引入1、链表定义及结构链表的分类3、单向不带头链表实现实现完整代码 4、带头双向循环链表实现实现完整代码 前言 引入 在上一篇文章中&#xff0c;我们认识了顺序表&#xff0c;但是在许多情况中&#xff0c;顺序表在处理一些事件时还存在许多问题&#xff0c;比…
阅读更多...
鸿鹄电子招投标系统：企业战略布局下的采购寻源解决方案

鸿鹄电子招投标系统：企业战略布局下的采购寻源解决方案

在数字化采购领域&#xff0c;企业需要一个高效、透明和规范的管理系统。通过采用Spring Cloud、Spring Boot2、Mybatis等先进技术&#xff0c;我们打造了全过程数字化采购管理平台。该平台具备内外协同的能力&#xff0c;通过待办消息、招标公告、中标公告和信息发布等功能模块…
阅读更多...
数据分析——快递电商

数据分析——快递电商

一、任务目标 1、任务 总体目的——对账 本项目解决同时使用多个快递发货&#xff0c;部分隔离区域出现不同程度涨价等情形下&#xff0c;如何快速准确核对账单的问题。 1、在订单表中新增一列【运费差异核对】来表示订单运费实际有多少差异&#xff0c;结果为数值。 2、将…
阅读更多...
【无标题】关于异常处理容易犯的错

【无标题】关于异常处理容易犯的错

一般项目是方法打上 try…catch…捕获所有异常记录日志&#xff0c;有些会使用 AOP 来进行类似的“统一异常处理”。 其实&#xff0c;这种处理异常的方式非常不可取。那么今天&#xff0c;我就和你分享下不可取的原因、与异常处理相关的坑和最佳实践。 捕获和处理异常容易犯…
阅读更多...
Feature Fusion for Online Mutual KD

Feature Fusion for Online Mutual KD

paper&#xff1a;Feature Fusion for Online Mutual Knowledge Distillation official implementation&#xff1a;https://github.com/Jangho-Kim/FFL-pytorch 本文的创新点 本文提出了一个名为特征融合学习&#xff08;Feature Fusion Learning, FFL&#xff09;的框架&…
阅读更多...
行走在深度学习的幻觉中：问题缘由与解决方案

行走在深度学习的幻觉中：问题缘由与解决方案

如何解决大模型的「幻觉」问题&#xff1f; 我们在使用深度学习大模型如LLM&#xff08;Large Language Models&#xff09;时&#xff0c;可能会遇到一种被称为“幻觉”的现象。没错&#xff0c;它并不是人脑中的错觉&#xff0c;而是模型对特定模式的过度依赖&#xff0c;这…
阅读更多...
Linux---gcc编译

Linux---gcc编译

目录 前言 一、gcc编译 二、程序的编译过程 三、gcc查看编译过程 1.预处理阶段 2.编译 3.汇编 4.链接 动静态库链接的内容 动静态库链接的优缺点 5.总结记忆 前言 在前面我们学会使用vim对文件进行编辑&#xff0c;如果是C或者C程序&#xff0c;我们编辑好了内容…
阅读更多...
【DDR】基于Verilog的DDR控制器的简单实现（一）——初始化

【DDR】基于Verilog的DDR控制器的简单实现（一）——初始化

在FPGA中&#xff0c;大规模数据的存储常常会用到DDR。为了方便用户使用&#xff0c;Xilinx提供了DDR MIG IP核&#xff0c;用户能够通过AXI接口进行DDR的读写访问&#xff0c;然而MIG内部自动实现了许多环节&#xff0c;不利于用户深入理解DDR的底层逻辑。 本文以美光(Micro…
阅读更多...
【算法刷题】Day28

【算法刷题】Day28

文章目录 1. 买卖股票的最佳时机 III题干&#xff1a;算法原理&#xff1a;1. 状态表示&#xff1a;2. 状态转移方程3. 初始化4. 填表顺序5. 返回值 代码&#xff1a; 2. Z 字形变换题干&#xff1a;算法原理&#xff1a;1. 模拟2. 找规律 代码&#xff1a; 1. 买卖股票的最佳时…
阅读更多...
重学Java 4 进制转换和位运算

重学Java 4 进制转换和位运算

天赋不好好使用的话&#xff0c;可是会被收回的哦 ——24.1.13 一、进制转换 1.常用的进制 2.十进制和二进制之间的转换 1.十进制转二进制 辗转相除法——循环除以2&#xff0c;取余数&#xff0c;除到商为0为止&#xff0c;除完后&#xff0c;由下往上&#xff0c;得出换算后…
阅读更多...
JVM基础（7）——ParNew垃圾回收器

JVM基础（7）——ParNew垃圾回收器

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…
阅读更多...
Kafka（四）Broker

Kafka（四）Broker

目录 1 配置Broker1.1 Broker的配置broker.id0listererszookeeper.connectlog.dirslog.dir/tmp/kafka-logsnum.recovery.threads.per.data.dir1auto.create.topics.enabletrueauto.leader.rebalance.enabletrue, leader.imbalance.check.interval.seconds300, leader.imbalance…
阅读更多...
Redis之集群方案比较

Redis之集群方案比较

哨兵模式 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态&#xff0c;如果master节点异常&#xff0c;则会做主从切换&#xff0c;将某一台slave作为master&#xff0c;哨兵的配置略微复杂&#xff0c;并且性能和高可用性等各方面表现一般&a…
阅读更多...
Node.js和npm

Node.js和npm

目录 01_Node.js01.什么是 Node.js目标讲解小结 02.fs模块-读写文件目标讲解小结 03.path模块-路径处理目标讲解小结 04.案例-压缩前端html目标讲解小结 05.认识URL中的端口号目标讲解小结 06.http模块-创建Web服务目标讲解小结 07.案例-浏览时钟目标讲解小结 02_Node.js模块化…
阅读更多...
【LabVIEW FPGA入门】使用CompactRIO进行SPI和I2C通信

【LabVIEW FPGA入门】使用CompactRIO进行SPI和I2C通信

NI提供了 SPI and I2C Driver API&#xff1a;下载SPI and I2C Driver API - NI 该API使用FPGA数字I / O线与SPI或I2C设备进行通信。 选择数字硬件时&#xff0c;要考虑三个选项&#xff1a; NI Single-Board RIO硬件可同时使用SPI和I2C驱动程序。NI 9401 C系列模块与SPI驱动程…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023