当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/no15870678621/article/details/135556183 2025/5/11 0:31:35 
<!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>

相关文章：

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 {borde…...

编程日记 2024/1/13 16:52:09

mac上部署单体hbase

1. 简介 HBase 是一个开源的、分布式的、版本化的典型非关系型数据库。它是 Google BigTable 的开源实现&#xff0c;并且是 Apache 基金会的 Hadoop 项目的一部分1。HBase 在 Hadoop Distributed File System (HDFS) 上运行&#xff0c;作为一个列式存储非关系数据库管理系统…...

编程日记 2024/1/13 16:50:08

【RV1126 学习】SDK/ U-Boot/kernel/rootfs 编译学习

文章目录 RV1126芯片介绍rv1126 模块代码目录相关说明 SDK 包下的脚本使用build.sh 脚本使用envsetup.sh 脚本使用mkfirmware.sh 脚本使用rkflash.sh 脚本使用 U-Boot 编译和配置uboot 的配置修改编译操作 kernel 的修改编译rootfs 编译和配置buildroot 配置busybox 配置 RV112…...

编程日记 2024/1/13 16:48:06

Golang 使用 AST 获取方法和参数名以及应用举例

背景 在做一些自动生成的代码工作时&#xff0c;有时需要知道方法以及对应的参数名 如果仅是方法&#xff0c;利用反射机制就可以解决 而参数名&#xff0c;程序编译后&#xff0c;已经丢失 可以通过 AST 事先获取方法的参数名 有了方法、参数名&#xff0c;加上反射&…...

编程日记 2024/1/13 16:46:03

DC-DC变换集成电路芯片B34063——工作电压范围宽，静态电流小

B34063为一单片DC-DC变换集成电路&#xff0c;内含温度补偿的参考电压源(1.25V)、比较器、能有效限制电流及控制工作周期的振荡器,驱动器及大电流输出开关管等&#xff0c;外配少量元件&#xff0c;就能组成升压、降压及电压反转型DC-DC变换器。 主要特点&#xff1a; ● 工作…...

编程日记 2024/1/13 16:44:01

强力推荐：本地文件加密软件—超详细加密步骤来了！

在数字化时代&#xff0c;数据安全问题日益受到人们的关注。 为了保护个人和企业的重要信息不被泄露&#xff0c;越来越多的人开始使用文件加密软件。 尤其是常常会有数据泄露风险的企业更是需要一款非常给力的加密工具来保护企业数据安全。 一、选择合适的加密软件 在选择加…...

编程日记 2024/1/13 16:40:59

在qml中，ListModel可以与WorkerScript一起使用，从多个线程访问列表模型

在QML中&#xff0c;您可以使用ListModel和WorkerScript一起实现多线程访问列表模型。以下是一个简单的例子&#xff0c;演示了如何在QML中使用这两个元素&#xff1a; import QtQuick 2.15 import QtQuick.Controls 2.15ApplicationWindow {visible: truewidth: 400height: 3…...

编程日记 2024/1/13 16:39:58

rocketmq实现延迟消息

SpringBoot整合RocketMQ发送延时消息 springboot rocketmq 延迟消息 Windows下RocketMQ安装及可视化界面搭建 Java 客户端 RocketMQ延迟消息 项目背景 项目中有延时消息的需求&#xff0c;综合考量RocketMQ比较适合。 RocketMQ支持多维度的延迟级别 支持多种消息类型 基…...

编程日记 2024/1/13 16:37:56

vue倒计时60秒改变按钮状态效果demo(整理)

你可以使用Vue的计时器和绑定状态的方法来实现这个功能。 首先&#xff0c;在data中添加一个计时器countdown&#xff0c;初始值为0。 data() {return {countdown: 0} }<template><div><button click"startCountdown" :disabled"countdown > …...

编程日记 2024/1/13 16:35:54

多区域isis配置实验

一、预习&#xff1a; IS-IS&#xff1a;Intermediate System to Intermediate System&#xff0c;中间系统到中间系统&#xff0c;是ISO为它的CLNP&#xff08;ConnectionLess Network Protocol&#xff09;设计的一种动态路由协议&#xff0c;后来为了提供对IP路由的支持&…...

编程日记 2024/1/13 16:34:53

Ubuntu 22.04.3 LTS arm64 aarch64 ISO jammy-desktop-arm64.iso 下载

Ubuntu 22.04.3 LTS (Jammy Jellyfish) Daily Build 参考 Are there official Ubuntu ARM / aarch64 desktop images? - Ask Ubuntu...

编程日记 2024/1/13 16:32:52

软件测试面试必备知识

随着软件测试领域对于技术要求越来越清晰&#xff0c;到现在测试人员在市场上的岗位需求也变得越来越复杂。极大部分的企业都开始对自动化测试岗位有了更多的需要。自然而然&#xff0c;面试就相对于非常重要了。 网络上有着各式各样的测试框架的存在&#xff0c;我也不知道我…...

编程日记 2024/1/13 16:31:51

4.4 媒资管理模块 - 分布式任务处理介绍、视频处理技术方案

媒资管理模块 - 视频处理 文章目录 媒资管理模块 - 视频处理一、视频转码1.1 视频转码介绍1.2 FFmpeg 基本使用1.2.1 下载安装配置1.2.2 转码测试 1.3 工具类1.3.1 VideoUtil1.3.2 Mp4VideoUtil1.3.3 测试工具类 二、分布式任务处理2.1 分布式任务调度2.2 XXL-JOB 配置执行器 中…...

编程日记 2024/1/13 16:28:48

K8S集群重新初始化--详细过程

K8S集群重新初始化 0、当前环境1、master节点1.1、在master节点执行下面reset命令&#xff1a;1.2、手动清除配置信息&#xff0c;这一步很关键&#xff1a;1.3、重新引导集群1.4、创建配置目录&#xff0c;并复制权限配置文件到用户目录下&#xff1a;1.5 查看集群状态1.6 安装…...

编程日记 2024/1/13 16:27:48

服务器 Linux常见指令

删除文件 删除文件 单个删除&#xff1a;rm -f 文件名 rm -f 2018_12_26.stderrout.log.060121612 --执行完成即将这个文件删除删除文件夹 rm -rf 路径/目录名tar命令 压缩 tar -cvf [文件名].tar [文件目录] //打包成.tar文件 tar -jcvf [文件名].tar.bz2 [文件目录]…...

编程日记 2024/1/13 16:25:46

C++合并K个有序链表

本篇博客介绍如何使用C合并k个有序链表&#xff0c;在代码中会用到std::priority_queue&#xff0c;首先需要介绍一下std::priority_queue的用法&#xff0c;介绍完std::priority_queue后将介绍如何使用std::priority_queue来辅助合并k个有序链表。 一、C priority_queue用法介…...

编程日记 2024/1/13 16:22:43

win10在启动游戏时报错，提示“d3dx9_25.dll文件丢失”，怎么办？d3dx9_25.dll丢失如何自动修复

一、d3dx9_25.dll文件是什么&#xff1f; d3dx9_25.dll是DirectX的一部分&#xff0c;DirectX是一种由微软开发的专门处理与多媒体、游戏程序和视频相关的应用程序接口。d3dx9_25.dll文件是DirectX9中一个重要的dll文件&#xff0c;主要负责处理3D图形程序&#xff0c;作用是帮…...

编程日记 2024/1/13 16:17:37

16. 蒙特卡洛强化学习基本概念与算法框架

文章目录 1. 是什么2. 有何优点3. 基本概念3.1 立即回报3.2 累积回报3.3 状态值函数3.4 行为值函数3.4 回合&#xff08;或完整轨迹&#xff0c;episode&#xff09;3.5 多个回合&#xff08;或完整轨迹&#xff09;的描述 4.MC强化学习问题的正式描述5. 蒙特卡洛&#xff08;M…...

编程日记 2024/1/13 16:15:35

QT中程序执行时间精准计算的三种方法及对比

一.QT程序在提升程序性能的调试中经常要计算一段程序的执行时间&#xff0c;下面介绍两种简单的实现方式&#xff0c;精确度都可以达到ms。 1.方式一 &#xff08;1&#xff09;代码&#xff1a; #include <QDateTime> qDebug() << "Current_date_and_tim…...

编程日记 2024/1/13 16:14:35

js下载方法分享*

JavaScript可以使用浏览器的API实现文件的下载&#xff0c;以下是一种常用的方法&#xff1a; 假设你已经有了一个文件 URL&#xff0c;你可以创建一个新的 a 标签&#xff0c;并将 href 属性设置为文件的 URL&#xff0c;然后模拟点击这个标签以开始下载。 function downloa…...

编程日记 2024/1/13 16:13:33

C# Stopwatch类_性能_时间计时器

文章只含部分属性方法等&#xff0c;有想了解全面的在下面链接中可以查看&#xff1a;.NET API browser Stopwatch 类 (System.Diagnostics) | Microsoft Learn 一、什么是Stopwatch Stopwatch&#xff1a;提供一组方法和属性&#xff0c;可以准确的测量运行时间。使用的时候需…...

编程日记 2024/1/13 16:12:32

鸿蒙原生应用再添新丁！天眼查 入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;天眼查 入局鸿蒙 来自 HarmonyOS 微博1月12日消息&#xff0c;#天眼查启动鸿蒙原生应用开发#作为累计用户数超6亿的头部商业信息查询平台&#xff0c;天眼查可以为商家企业&#xff0c;职场人士以及普通消费者等用户便捷和安全地提供查询海量…...

编程日记 2024/1/13 16:11:31

HarmonyOS4.0——ArkUI应用说明

一、ArkUI框架简介 ArkUI开发框架是方舟开发框架的简称&#xff0c;它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架&#xff0c;它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具&#xff0c;帮助开发者提升应用界面开发效率 30%&#xff0c;开发…...

编程日记 2024/1/13 16:10:30

基于模块自定义扩展字段的后端逻辑实现（二）

目录 一&#xff1a;创建表 二&#xff1a;代码逻辑 上一节我们详细讲解了自定义扩展字段的逻辑实现和表的设计&#xff0c;这一节我们以一个具体例子演示下&#xff0c;如何实现一个订单模块的自定义扩展数据。 一&#xff1a;创建表 订单主表: CREATE TABLE t_order ( …...

编程日记 2024/1/13 16:08:28

图像中部分RGB矩阵可视化

图像中部分RGB可视化 今天室友有个需求就是模仿下面这张图画个示意图&#xff1a; 大致就是把图像中的一小部分区域的RGB值可视化了一下。他居然不知道该怎么画&#xff0c;我寻思这不直接秒了。 import cv2 as cv import numpy as np import matplotlib.pyplot as pltclass …...

编程日记 2024/1/13 16:07:27

RPA财务机器人在厦门市海沧医院财务管理流程优化汇总的应用

目前国内外研究人员对于RPA机器人在财务管理流程优化领域中的应用研究层出不穷&#xff0c;但现有研究成果主要集中在财务业务单一领域&#xff0c;缺乏财务管理整体流程一体化管控的研究。RPA机器人的功能绝非单一的财务业务处理&#xff0c;无论从自身技术发展&#xff0c;或…...

编程日记 2024/1/13 16:06:26

聚焦老年生活与健康，“老有所依·情暖夕阳”元岗街社区微型养老博览会顺利开展

尊老敬老是中华民族的传统美德&#xff0c; 爱老助老是全社会的共同责任。 家有一老&#xff0c;如有一宝&#xff0c; 长者的生活情况是一个家庭的头等大事&#xff0c; 做好长者服务是街道和社区的重要工作。 2024年1月6日&#xff0c;由元岗街道党工委、元岗街道办事处、…...

编程日记 2024/1/13 16:05:25

记录汇川：H5U与Factory IO测试12

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 辅助出料 子程序&#xff1a; 自动程序 Factory IO配置&#xff1a; 实际动作如下&#xff1a; Factory IO测试12...

编程日记 2024/1/13 16:04:24

PingCAP 受邀参加 FICC 2023，获 Open100 世纪全球开源贡献奖

2023 年 12 月&#xff0c;2023 国际测试委员会智能计算与芯片联邦大会&#xff08;FICC 2023&#xff09;在海南三亚举办&#xff0c;中外院士和数十位领域专家莅临出席。 大会现场 &#xff0c;开放源代码促进会创始人 Bruce Perens 颁发了 Open100 世纪全球开源贡献奖&…...

编程日记 2024/1/13 16:02:23

10-skywalking告警

https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/backend-alarm.md 5.1&#xff1a;告警指标 ~$ vim /apps/apache-skywalking-apm-bin/config/oal/core.oal service_resp_time # 服务的响应时间 service_sla # 服务http请求成功率SLV&#xff0c;比…...

编程日记 2024/1/13 15:58:19