要在Javascript中实现表格新增行功能,且添加元素,增删操作

起始表格元素:

 <!-- table>(thead>tr>th*6)+(tbody>tr>td*6) --><div class="container"><table id="myTable"><caption><h3>员工信息管理系统</h3></caption><thead><tr><th>全选 <input type="checkbox" id="allSelectCheckbox"></th><th>姓名</th><th>年龄</th><th>性别</th><th>电话</th><th>操作</th></tr></thead><tbody id="tbodyId"><tr><td><input type="checkbox"></td><td>aa</td><td>19</td><td>male</td><td>110</td><td><input type="button" value="删除" onclick="delRow(this)"></td></tr><tr><td><input type="checkbox"></td><td>bb</td><td>20</td><td>male</td><td>110</td><td><input type="button" value="删除" onclick="delRow(this)"></td></tr><tr><td><input type="checkbox"></td><td>cc</td><td>19</td><td>female</td><td>119</td><td><input type="button" value="删除" onclick="delRow(this)"></td></tr></tbody><tfoot id="tfootId"><tr><td><input type="button" value="多选删除" onclick="delAll()"></td><td colspan="2" class="btn-right" onclick="delFirst()"><button>删除第一个</button></td><td colspan="2" onclick="delLast()"><button >删除最后一个</button></td><td></td></tr></tfoot></table><hr><form>姓名:<input type="text" id="name" value=""> <br>年龄:<input type="text" id="age"> <br>性别:<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女<br>电话:<input type="text" id="phone"><br><input type="button" value="添加" onclick="addCustom()"><input type="reset" value="重置"></form></div>
  1. 获取表格元素。

  2. 创建一个新的表格行(<tr>)元素。

  3. 根据需要创建表格单元格(<td>)元素,并将它们添加到新创建的表格行中。

  4. 将新创建的表格行添加到表格中。

函数:insertRow(args) 是一个用于在 HTML 表格中插入新行的方法。它args接受一个参数,表示要插入新行的索引位置。如果参数为负数,则新行将插入到表格的末尾。

例子:insertRow(-1) 则新行将插入到表格的末尾。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格新增行示例</title>
</head>
<body><table id="myTable" border="1"><tr><td>行1,列1</td><td>行1,列2</td></tr></table><button onclick="addRow()">添加行</button><script>function addRow() {// 获取表格元素var table = document.getElementById("myTable");// 创建一个新的表格行var newRow = table.insertRow(-1);// 创建表格单元格并添加到新行中var cell1 = newRow.insertCell(0);var cell2 = newRow.insertCell(1);// 设置单元格内容cell1.innerHTML = "新行,列1";cell2.innerHTML = "新行,列2";}</script>
</body>
</html>
在添加到新行中创建的新的表格单元格,并添加内容:
		   // 在倒数第二行插入新行var newRow = foot.insertRow(rowCount - 1);//创建表格单元格并添加到新行中var cell1 = newRow.insertCell(0);var cell2 = newRow.insertCell(1);var cell3 = newRow.insertCell(2);var cell4 = newRow.insertCell(3);var cell5 = newRow.insertCell(4);var cell6 = newRow.insertCell(5);//设置单元格内容cell1.innerHTML = '<input type="checkbox">';cell2.innerHTML = nameValue;cell3.innerHTML = ageValue;cell4.innerHTML = sexValue;cell5.innerHTML = phoneValue;cell6.innerHTML = '<input type="button" value="删除" onclick="delRow(this)">';
实时判断复选框是否被选中,使用监听的方法(否则每次只能在起始的时候判断一次):
// 获取复选框元素
var checkbox = document.getElementById("myCheckbox");// 为复选框添加事件监听器
checkbox.addEventListener("change", function() {// 判断复选框是否被选中if (this.checked) {// 复选框被选中时执行的方法checkedMethod();} else {// 复选框未被选中时执行的方法uncheckedMethod();}
});function checkedMethod() {console.log("复选框被选中");
}function uncheckedMethod() {console.log("复选框未被选中");
}
如何获取表格行数,并插入到指定的表格位置:
// 获取表格元素
var table = document.getElementById("myTable");// 获取表格的行数
var rowCount = table.rows.length;// 在倒数第一行插入新行
var newRow = table.insertRow(rowCount);
//var newRow = table.insertRow(-1);// 在新行中插入单元格并设置内容
var cell1 = newRow.insertCell(0);
cell1.innerHTML = "新行,列1";
var cell2 = newRow.insertCell(1);
cell2.innerHTML = "新行,列2";
如何获取单选框选中的value值:
<body>性别:<label><input type="radio" name="sex" value="male">男</label><label><input type="radio" name="sex" value="female">女</label><br><button onclick="onPrint()">打印</button><script>function onPrint(){var sex = document.getElementsByName("sex");for (var i = 0; i < sex.length; i++) {if (sex[i].checked) {console.log(sex[i].value);;break;}}}</script>
</body>
可以使用以下代码实现表格全选按钮后,选中所有行并删除:

函数:table.deleteRow(args); 是删除表格的某一行;

// 获取表格元素
var table = document.getElementById("myTable");// 遍历表格的每一行
for (var i = 0; i < table.rows.length; i++) {// 将每一行的选中状态设置为truetable.rows[i].cells[0].firstChild.checked = true;
}// 删除选中的行
for (var i = table.rows.length - 1; i >= 0; i--) {if (table.rows[i].cells[0].firstChild.checked) {table.deleteRow(i);}
}
在表格中每一行都有Button控件,为其绑定一个函数,当点击该按钮的时候,删除按钮所在行
<table id="myTable"><tr><td>1</td><td>2</td><td><button onclick="deleteRow(this)">删除</button></td></tr><tr><td>3</td><td>4</td><td><button onclick="deleteRow(this)">删除</button></td></tr><tr><td>5</td><td>6</td><td><button onclick="deleteRow(this)">删除</button></td></tr>
</table>
<script>
function deleteRow(row) {var table = document.getElementById("myTable");var rowIndex = row.parentNode.parentNode.rowIndex;table.deleteRow(rowIndex);
}
</script>

 实现效果如下:

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

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

相关文章

Java设计模式 | 七大原则之迪米特法则

基本介绍 一个对象应该对其他对象保持最少的了解类与类关系越密切&#xff0c;耦合度越大迪米特法则&#xff08;Demeter Principle&#xff09;又叫最少知道法则&#xff0c;即一个类对自己依赖的类知道的越少越好。也就是说&#xff0c;对于被依赖的类不管多么复杂&#xff…

一文带你了解MySQL之B+树索引的原理

前言 学完前面我们讲解了InnoDB数据页的7个组成部分&#xff0c;知道了各个数据页可以组成一个双向链表&#xff0c;而每个数据页中的记录会按照主键值从小到大的顺序组成一个单向链表&#xff0c;每个数据页都会为存储在它里边儿的记录生成一个页目录&#xff0c;在通过主键查…

Langchain-Chatchat:离线运行的大模型知识库 | 开源日报 No.182

chatchat-space/Langchain-Chatchat Stars: 22k License: Apache-2.0 基于 ChatGLM 等大语言模型与 Langchain 等应用框架实现的开源、可离线部署的检索增强生成 (RAG) 大模型知识库项目。该项目是一个可以实现完全本地化推理的知识库增强方案&#xff0c;重点解决数据安全保护…

二分查找讲解

关于我为什么要写单独开一篇文章写二分,实际上那么多困难的算法,比如线段树,并查集等等都没有难倒我,我最近却被二分难倒了,而且是两次,两次在赛场上做不出来二分的应用题,于是我决定写一篇二分查找的算法总结.刚接触算法的时候本来是要写一篇的,但后面因为各种原因搁置了,现在…

Mybatis插入数据时有外键怎么办?

今天在写代码的时候遇到了一个问题&#xff1a; 比方说我的数据库如下&#xff1a; 其中work_position和auth都是外键&#xff0c;关联了另一张表。 但我现在要往mysql里插入一条数据&#xff0c;如下&#xff1a; insert into t_employee_info(salary, work_time, work_posi…

LeetCode_Java_动态规划系列(3)(题目+思路+代码)

338.比特位计数 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 class Solution {public int[] countBits(int n) {/** 思路&#xff1a;* 1.创建一个长度为 n…

【Linux】进程优先级以及Linux内核进程调度队列的简要介绍

进程优先级 基本概念查看系统进程修改进程的优先级Linux2.6内核进程调度队列的简要介绍和进程优先级有关的概念进程切换 基本概念 为什么会存在进程优先级&#xff1f;   进程优先级用于确定在资源竞争的情况下&#xff0c;哪个进程将被操作系统调度为下一个运行的进程。进程…

事件驱动的奇迹:深入理解Netty中的EventLoop

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 事件驱动的奇迹&#xff1a;深入理解Netty中的EventLoop 前言基础概念EventLoop的工作原理Channel与EventLoop的关系定时任务与延时任务EventLoop的生命周期EventLoop中的线程模型性能优化与最佳实践 …

ARM系列 -- 虚拟化(二)

上一篇介绍了虚拟化和hypervisor的基本概念。为了配合虚拟化&#xff0c;ARM做了许多工作&#xff0c;首先是定义了四个异常等级&#xff08;Exception Level&#xff0c;简称EL&#xff09;。 前面介绍异常和特权的文章中有介绍&#xff0c;此处再啰嗦几句。每个异常级别都有…

react-组件进阶

1.目标 能够实用props接收数据 能够实现父子组件之间的通讯 能够实现兄弟组件之间的通讯 能够给组件添加props校验 能够说出生命周期常用的钩子函数 能够知道高阶组件的作用 2.目录 组件通讯介绍 组件的props 组件通讯的三种方式 Context props深入 组件的生命周期 Render-p…

java面试说自己的优势,2022必看

纯手打“RocketMQ笔记” 第一节&#xff1a;RocketMQ介绍 1.1 核心概念&#xff08;主题、生产者、消费者、消息&#xff09; 1.2 RocketMQ的设计理念和目标&#xff08;设计理念、设计目标&#xff09; 第二节&#xff1a;RocketMQ中消息的发送 2.1 单向[OneWay]发送&#…

k8s service的概念以及创建方法

Service 的功能&#xff1a; Service主要用于提供网络服务&#xff0c;通过Service的定义&#xff0c;能够为客户端应用提供稳定的访问地址&#xff08;域名或IP地址&#xff09;和负载均衡功能&#xff0c;以及屏蔽后端Endpoint的变化&#xff0c;是K8s实现微服务的核心资源。…