js表格中的DOM操作之添加、删除行

最新推荐文章于 2024-05-16 16:52:30 发布
最新推荐文章于 2024-05-16 16:52:30 发布
阅读量7.5k 收藏 38
点赞数 7
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanjiejiaoxiangni/article/details/83049909
版权

js表格中的DOM操作之添加、删除行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		</style>
		<script>
			/**
				功能实现：1、实现表格添加一行
						  2、实现表格删除当前行
				步骤：1、根据表格id获取当前表格
					  2、获取表格中的tBody(Bodies[0])
					  3、为添加按钮增加click事件，为tBody创建子节点添加
					  4、为当前行的a元素增加click事件，删除本行
				注意点：1、添加一行时，生成序号的获取
						2、删除时，获取a元素，添加事件
				
				
			*/
			window.onload = function(){
				//获取ID为tab1的表格
				var oTab = document.getElementById('tab1');
				//获取id为name的文本框
				var oName = document.getElementById('name');
				//获取id为age的文本框
				var oAge = document.getElementById('age');
				//获取id为btn1的按钮
				var oBtn = document.getElementById('btn1');
				
				var index= oTab.tBodies[0].rows.length;
				
				//为oBtn添加click事件，每点击一次，增加一行
				oBtn.onclick = function (){
					//创建元素tr
					var oTr =document.createElement('tr');
					index++;
					//创建第一个td
					var oTd1 = document.createElement('td');
					//***序号id获取要注意
					oTd1.innerHTML = index;
					oTr.appendChild(oTd1);
					
					//创建
					var oTd2 = document.createElement('td');
					oTd2.innerHTML = oName.value;
					oTr.appendChild(oTd2);
					
					var oTd3 = document.createElement('td');
					oTd3.innerHTML = oAge.value;
					oTr.appendChild(oTd3);
					
					var oTd4 = document.createElement('td');
					oTd4.innerHTML = '<a href="javascript:;">删除</a>';
					oTr.appendChild(oTd4);
					
					//**获取到当前添加行里的a元素，增加click事件
					oTd4.getElementsByTagName('a')[0].onclick=function(){
						oTab.tBodies[0].removeChild(this.parentNode.parentNode);
					}
					
					//将tr添加到tbody中
					oTab.tBodies[0].appendChild(oTr);	
				}
				
				
				
				
			}
			
			
		</script>
	</head>
	<body>
		姓名：<input type="text" id="name" />   
		年龄: <input type="text" id="age" />
		<input type="button" id="btn1" value="添加一行" />
		<table border="1px" width="300px" id="tab1">
			<tHead>
				<tr>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
			</tHead>
			<tBody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>27</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>3</td>
				</tr>
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>50</td>
				</tr>
					<tr>
					<td>5</td>
					<td>王小七</td>
					<td>30</td>
				</tr>
				<tr>
					<td>6</td>
					<td>刘小二</td>
					<td>36</td>
				</tr>
			</tBody>
		</table>
		
	</body>
</html>

在这里插入图片描述

zhanjiejiaoxiangni
关注
  • 7
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
js的节点操作动态创建table表格，创建行，删除行.pdf
12-16
js的节点操作动态创建table表格，创建行，删除行
原生js操作table表格增删改查操作汇总
最新发布
随手记的笔记
05-16 647
【代码】原生js操作table表格增删改查操作汇总。
【javascript】Dom操作 表格的添加行，删除行，修改行，
口袋里的小龙的专栏
07-25 4173
Dom操作 表格的添加行，删除行，修改行
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3109
eed
DOM元素操作之表格的增添和删除
m0_56071898的博客
05-09 627
文章目录前言一、表格的增添1.html代码2.js代码二、表格的删除js代码总结 前言 JavaScript关于DOM元素的操作，本章重点是通过onclick点击事件获取当前节点所在的父节点，以此来删除当前节点 一、表格的增添 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接
杨明金的博客
11-01 3033
查看本章节 查看作业目录 需求说明： 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接，使用 DOM 节点的删除操作将对应的行数据删除 在文本输入框中输入姓名、年龄、班级和手机号，并选择性别 点击“插入数据”按钮，将输入框中的数据插入到表格中，表格中的数据将增加一条 点击表格中每条数据后的“删除”超链接，将删除该条数据，表格中的数据将减少一条 实现思路： 在页面中绘制表格，并添加 4 条虚拟数据，在每条数据后使用超链接，并且添加超链接
JS——删除DOM元素的两种方法
mkijnbgt的博客
04-27 2953
【代码】JS删除DOM元素的两种方法。
使用DOM完成订单的添加、修改及删除操作
wangyin233的博客
11-21 7575
这里写自定义目录标题初始界面如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 初始界面 点击“增加订单”按钮时，可增加一行订单信息。 点击“修改”按钮时，数量改为文本框显示，可以改变数量，并且“...
JavaScript Dom 案例-动态表格的添加和删除(一)
ontheroad1024的博客
12-18 1167
案例知识点关键字: Document,Node,Element,innerHTML,onclick 基本代码如下,这是一个目前只有HTML和CSS的的页面效果: 代码如下: Title <table> <caption>信息表</ca...
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项...总结来说，动态向JavaScript表格添加数据涉及HTML结构、JavaScript DOM操作、事件处理和数据绑定等多个方面。理解并掌握这些知识点对于构建交互式的Web应用程序至关重要。
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
为了实现删除功能，通常会在每一行的“操作”列中添加一个删除按钮，然后为该按钮添加一个点击事件监听器。监听器函数可能如下所示： ```javascript function deleteRow(rowId) { var table = document....
JavaScript获取表格（table）当前行的值、删除行、增加行
10-24
在JavaScript中，操作HTML表格（table）是一种常见的需求，包括获取当前行的值、删除行以及增加行。本文提供了一段代码示例，演示了如何实现这些功能。 首先，我们来详细讲解如何获取表格当前行的值。在这个例子中...
JQuery实现表格动态增加行并对新行添加事件
10-25
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。本示例探讨了如何使用jQuery实现表格动态增加行的功能，并且在新行上添加事件，以提升用户体验和性能。 首先，我们...
jQuery实现表格行和列的动态添加与删除方法【测试可用】
10-21
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。本文将详细讲解如何使用jQuery实现表格行和列的动态添加与删除功能，这对于创建交互式数据展示页面至关重要...
HTML中动态的增加和删除表格中的一行
H-rosy的博客
05-15 1万+
利用HTML，CSS和JavaScript三种技术完成表格页面级的操作，具体内容如下： （1）利用HTML编写网页： “编号”、“姓名”、“性别”三个文本框，“添加”按钮，一个“学生信息表”表格； （2）利用CSS设置表格的样式：实线边框，文本居中； （3）运用JavaScript DOM技术实现表格增加和删除记录。 页面效果如下： 图1 初始界面 图2添加记录 图3删除记录 <!DOCTYPE html> <html l...
HTML动态增加和删除表格的行和列
热门推荐
huzijia888的博客
12-03 4万+
起始状态 增加行 增加列 删除行 删除列 function addrow(){   var c=document.getElementById('mytable');//获得表格的信息   if( c.rows.length==0){//如果是向一个空表增加一行  var x=c.insertRow(0);//
javascript:dom案例实现动态生成表格
果冻
05-11 803
核心思想： 因为里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好 数据。 数据我们采取对象形式存储。 所有的数据都是放到tbody里面的行里面。 因为行很多，我们需要循环创建多个行（对应多少人） 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格， 并且把数据存入里面（双重for循环） 最后一列单元格是删除，需要单独创建单元格。 最后添加删除操作，单击删除，可以删除当前行。 <!DOCTYPE html&gt
javascript dom操作表格
04-06
JavaScript DOM操作表格是指使用JavaScript操作HTML文档中的表格元素，包括获取表格数据、修改表格样式、添加或删除表格行列等操作。通过使用DOM方法和属性，可以轻松地实现对表格的各种操作，提高页面交互、动态效果和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值