JavaScript_动态表格_添加功能

 1、动态表格_添加功能.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态表格_添加功能</title><style>table{border: 1px solid;margin: auto;width: 100%;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style>
</head>
<body><div><input type="text" id="id" placeholder="请输入编号"/><input type="text" id="name" placeholder="请输入姓名"/><input type="text" id="gender" placeholder="请输入性别"/><input type="button" value="添加" id="btn_add" onclick="btn_add"/></div><table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>张三丰</td><td>男</td><td><a href="javascript:void(0)">删除</a> </td></tr><tr><td>2</td><td>张翠山</td><td>男</td><td><a href="javascript:void(0)">删除</a> </td></tr><tr><td>3</td><td>张无忌</td><td>男</td><td><a href="javascript:void(0)">删除</a> </td></tr></table><script>/***     1、给添加按钮绑定单击事件*     2、获取文本框的内容*     3、创建td,设置td的文本为文本框的内容*     4、创建tr*     5、将td添加到tr中*     6、获取table,将tr添加到table中*///1、获取按钮document.getElementById("btn_add").onclick = function () {//2、获取文本框的内容let id = document.getElementById("id").value;let name = document.getElementById("name").value;let gender = document.getElementById("gender").value;//3.创建td,赋值td的标签体//id的tdlet td_id = document.createElement("td");let text_id = document.createTextNode(id);td_id.appendChild(text_id);//name的tdlet td_name = document.createElement("td");let text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender的tdlet td_gender = document.createElement("td");let text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a标签的tdlet td_a = document.createElement("td");let ele_a = document.createElement("a");ele_a.setAttribute("href", "javascript:void(0)");ele_a.setAttribute("onclick", "delTr(this)");let text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4、创建trlet tr = document.createElement("tr");//5、添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6、获取tablelet table = document.getElementsByTagName("table")[0];table.appendChild(tr);};</script></body>
</html>

 

    // 当点击id为"btn_add"的元素时,执行以下函数document.getElementById("btn_add").onclick = function () {// [待填充]};//该函数是为一个id为"btn_add"的按钮元素绑定一个点击事件,当按钮被点击时,将执行匿名函数内的代码

 

let id = document.getElementById("id").value;  // 获取id元素的值
let name = document.getElementById("name").value;  // 获取name元素的值
let gender = document.getElementById("gender").value;  // 获取gender元素的值
//这个函数通过调用document.getElementById方法,获取页面中指定id的元素的值,并将其赋值给对应的变量。
//这样就可以通过这些变量来操作或使用页面元素的值
//创建一个 <td> 元素
td_id = document.createElement("td");
//创建一个文本节点
text_id = document.createTextNode(id);
//将文本节点添加到 <td> 元素中
td_id.appendChild(text_id);
//这个函数创建了一个新的HTML表格单元格元素(<td>),并创建了一个包含id文本的文本节点。
//然后将文本节点添加到表格单元格元素中
let td_a = document.createElement("td");  //创建一个<td>元素
let ele_a = document.createElement("a");  //创建一个<a>元素
ele_a.setAttribute("href", "javascript:void(0)");  //设置<a>元素的href属性为"javascript:void(0)"
ele_a.setAttribute("onclick", "delTr(this)");  //设置<a>元素的onclick属性为"delTr(this)"
let text_a = document.createTextNode("删除");  //创建一个文本节点,内容为"删除"
ele_a.appendChild(text_a);  //将文本节点添加到<a>元素中
td_a.appendChild(ele_a);  //将<a>元素添加到<td>元素中
//该代码创建了一个包含链接和文本的表格单元格。链接的href属性设置为"javascript:void(0)",表示点击链接时不会跳转到其他页面。
//链接的onclick属性设置为"delTr(this)",表示点击链接时会调用"delTr"函数并传递链接本身作为参数。
//文本内容"删除"由文本节点创建并添加到链接中,然后链接被添加到表格单元格中。
// 创建一个 tr 元素
let tr = document.createElement("tr");
//该函数使用JavaScript创建一个新的HTML表格行元素,并将其作为返回值返回。
//创建一个tr元素,并将td元素添加到其中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//给定一个HTML表格,将四个表格数据单元格(td)添加到当前行(tr)中。
//获取页面中所有table标签
table = document.getElementsByTagName("table")[0];
//将<tr>标签作为子元素添加到第一个table标签中
table.appendChild(tr);
//这个代码片段将获取页面中第一个table元素,并将一个tr元素作为其子元素添加。

2、可以使用JavaScript的DOM操作,通过以下步骤动态添加数据到表格中:

  1. 获取表格对象,可以通过getElementById或者querySelector等方式获取。

  2. 创建一个新的行对象,并设置行的属性。可以使用createElement方法创建tr元素,然后使用setAttribute方法设置该行的属性,如id等。

  3. 创建每个单元格对象,并设置单元格内容。可以使用createElement方法创建td元素,然后使用appendChild方法将文本节点添加到单元格中。

  4. 将单元格添加到行中,可以使用appendChild方法将每个单元格对象添加到行对象中。

  5. 将新创建的行对象添加到表格中,可以使用appendChild方法将行对象添加到表格对象的tbody或thead中。

示例代码:

// 获取表格对象
var table = document.getElementById("myTable");// 创建一个新的行对象
var row = document.createElement("tr");// 创建每个单元格对象,并设置单元格内容
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.appendChild(document.createTextNode("Cell 1"));
cell2.appendChild(document.createTextNode("Cell 2"));// 将单元格添加到行中
row.appendChild(cell1);
row.appendChild(cell2);// 将新创建的行对象添加到表格中
table.appendChild(row);

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

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

相关文章

SOME/IP 协议介绍(四)RPC协议规范

RPC协议规范 本章描述了SOME/IP的RPC协议。 传输协议绑定 为了传输不同传输协议的SOME/IP消息&#xff0c;可以使用多种传输协议。SOME/IP目前支持UDP和TCP。它们的绑定在以下章节中进行了解释&#xff0c;而第[SIP_RPC_450页&#xff0c;第36页]节讨论了选择哪种传输协议。…

【Go入门】面向对象

【Go入门】面向对象 前面两章我们介绍了函数和struct&#xff0c;那你是否想过函数当作struct的字段一样来处理呢&#xff1f;今天我们就讲解一下函数的另一种形态&#xff0c;带有接收者的函数&#xff0c;我们称为method method 现在假设有这么一个场景&#xff0c;你定义…

Linux驱动开发——PCI设备驱动

目录 一、 PCI协议简介 二、PCI和PCI-e 三、Linux PCI驱动 四、 PCI设备驱动实例 五、 总线类设备驱动开发习题 一、 PCI协议简介 PCI (Peripheral Component Interconnect&#xff0c;外设部件互联) 局部总线是由Intel 公司联合其他几家公司一起开发的一种总线标准&#…

前端开发引入element plus与windi css

背景 前端开发有很多流行框架&#xff0c;像React 、angular、vue等等&#xff0c;本文主要讲vue 给新手用的教程&#xff0c;其实官网已经写的很清楚&#xff0c;这里再啰嗦只是为了给新手提供一个更加简单明了的参考手册。 一、打开element plus官网选则如图所示模块安装命令…

Nginx缓存基础

1 nginx缓存的流程 客户端需要访问服务器的数据时&#xff0c;如果都直接向服务器发送请求&#xff0c;服务器接收过多的请求&#xff0c;压力会比较大&#xff0c;也比较耗时&#xff1b;而如果在nginx缓存一定的数据&#xff0c;使客户端向基于nginx的代理服务器发送请求&…

华为L410上制作内网镜像模板02

原文链接&#xff1a;华为L410上制作离线安装软件模板02 hello&#xff0c;大家好啊&#xff0c;今天给大家带来第二篇在内网搭建Apache服务器&#xff0c;用于安装完内网操作系统后&#xff0c;在第一次开机时候&#xff0c;为系统安装软件的文章&#xff0c;今天给大家介绍在…

Linux之基础开发工具gdb调试器的使用(三)

文章目录 一、Linux调试器-gdb使用1、安装gdb2、背景3、Debug和release4、区分Debug和release 二、Linux调试器-gdb命令演示1、显示指定行之后的代码&#xff08;自动记录最后一条指令&#xff09;2、断点1、打印断点2、查看断点3、删除断点4、使能&#xff08;禁用/开启&#…

StartUML的基本使用

文章目录 简介和安装创建包创建类视图时序图 简介和安装 最近在学习一个项目的时候用到了StartUML来构造项目的类图和时序图 虽然vs2019有类视图&#xff0c;但是也不是很清晰&#xff0c;并没有生成uml图&#xff0c;但是宇宙最智能的IDE IDEA有生成uml图的功能 下面就简单介…

Flowable 外部表单

内置表单需要在每个节点中去配置&#xff0c;当如果多个节点使用同一套表单属性就要配置多次比较麻烦&#xff0c;修改的时候也要修改多次&#xff0c;外部表单可以定义一次&#xff0c;然后其它节点都去引用同一个表单属性。 外部表单需要定义一个.form后缀的文件。 外部表单…

关于值传递和引用传递的问题记录

目录 1. 问题概述 1.1 测试 1.2 结果 2. ArrayList和Arrays.ArrayList 1. 问题概述 最近忙着写论文很久没更新了&#xff0c;趁现在有时间简单记录一下最近遇到的一个坑。 对于Java中的List<>类型的对象&#xff0c;按我以前理解是引用传递&#xff0c;但有一点要注…

Excel中使用数据验证、OFFSET实现自动更新式下拉选项

在excel工作簿中&#xff0c;有两个Sheet工作表。 Sheet1&#xff1a; Sheet2&#xff08;数据源表&#xff09;&#xff1a; 要实现Sheet1中的“班级”内容&#xff0c;从数据源Sheet2中获取并形成下拉选项&#xff0c;且Sheet2中“班级”内容更新后&#xff0c;Sheet1中“班…

SMART PLC MODBUSTCP速度测试

SMART PLC MODBUSTCP通信详细介绍请参看下面文章链接: S7-200SMART PLC ModbusTCP通信(多服务器多从站轮询)_matlab sumilink 多个modbustcp读写_RXXW_Dor的博客-CSDN博客文章浏览阅读6.4k次,点赞5次,收藏10次。MBUS_CLIENT作为MODBUS TCP客户端通过S7-200 SMART CPU上的…

ARM寄存器及功能介绍/R0-R15寄存器

1、ARM 寄存器组介绍 ARM 处理器一般共有 37 个寄存器&#xff0c;其中包括&#xff1a; &#xff08;1&#xff09; 31 个通用寄存器&#xff0c;包括 PC&#xff08;程序计数器&#xff09;在内&#xff0c;都是 32 位的寄存器。 &#xff08;2&#xff09; 6 个状态寄存器…

【中间件篇-Redis缓存数据库02】Redis高级特性和应用(慢查询、Pipeline、事务、Lua)

Redis高级特性和应用(慢查询、Pipeline、事务、Lua) Redis的慢查询 许多存储系统&#xff08;例如 MySQL)提供慢查询日志帮助开发和运维人员定位系统存在的慢操作。所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间&#xff0c;当超过预设阀值,就将这条命令的相关…

spring boot 中@Value读取中文配置时乱码

1.spring boot 读取application.properties 该文件是iso8859编码 如果是直接写中文 读取时会乱码 显示成?? 必须得转ascii码才能正常显示 其他方法测试也不行 Value("${apig.order.tiaokong.qianzi}") private String apigOrderTiaokongQianzi;

LabVIEW中NIGPIB设备与驱动程序不相关的MAX报错

LabVIEW中NIGPIB设备与驱动程序不相关的MAX报错 当插入GPIB-USB设备时&#xff0c;看到了NI MAX中列出该设备&#xff0c;但却显示了黄色警告指示&#xff0c;并且指出Windows没有与您的设备相关的驱动程序。 解决方案 需要安装能兼容的NI-488.2驱动程序。 通过交叉参考以下有…

链表的实现(文末附完整代码)

链表的概念及结构 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 我们在上一篇文章所学习的顺序表是连续存储的 例如&#xff1a; 顺序表就好比火车上的一排座位&#xff0c;是连续的 而链表就好比是火车…

xlua游戏热更新(lua访问C#)

CS.UnityEngine静态方法访问unity虚拟机 创建游戏物体 CS.UnityEngine.GameObject(new by lua);静态属性 CS.UnityEngine.GameObject(new by lua); -- 创建 local camera CS.UnityEngine.GameObject.Find(Main Camera); --查找 camera.name Renamed by Lua;访问组件 loca…

Swift--量值与基本数据类型

系列文章目录 第一章: Swift–量值与基本数据类型 文章目录 系列文章目录前言对学习过程做一个记录 变量和常量命名规范注释 元祖类型可选类型拆包 typealias 前言 对学习过程做一个记录 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 变量和常量 …

分享一下关于“vcruntime140_1.dll丢失的5种解决方法

今天我来给大家分享一下关于“vcruntime140_1.dll丢失的5种修复方法”的分享。首先&#xff0c;我们来了解一下vcruntime140_1.dll丢失的原因。 病毒感染&#xff1a;病毒或恶意软件可能损坏或删除vcruntime140_1.dll文件。 系统更新或软件安装&#xff1a;在进行系统更新或安…