JS学习笔记-列表的删除和增加

最新推荐文章于 2023-05-25 11:34:14 发布
最新推荐文章于 2023-05-25 11:34:14 发布
阅读量2.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43520670/article/details/103467577
版权

列表的删除和增加

1.HTML文件

我们在HTML中写入一个简单的学生信息表，这个表并没有用太多的样式，但是不影响结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div align="center">
			<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">		
		</div>
		<table border="" cellspacing="" cellpadding="" style="" align="center">
			<caption>学生信息表</caption>
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
			
			<tr>
				<td>1</td>
				<td>刘有义</td>
				<td>男</td>
				<td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
			</tr>
			
			<tr>
				<td>2</td>
				<td>铁无情</td>
				<td>女</td>
				<td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
			</tr>
			
			<tr>
				<td>3</td>
				<td>李中</td>
				<td>男</td>
				<td><a href="javascript:void(0);" οnclick="delTr(this)">删除</a></td>
			</tr>
		</table>
	</body>
	<script src="js/add_delete.js"></script>
</html>

2.js文件

1）我们用面向对象的的js来写

		//1.获取按钮
		document.getElementById("btn_add").onclick = function(){
			//获取文本框内容
			var id = document.getElementById("id").value;
			var name = document.getElementById("name").value;
			var gender = document.getElementById("gender").value;
			//创建td,赋值td的标签体
			//id的td
			var td_id = document.createElement("td");
			var text_id = document.createTextNode(id);
			td_id.appendChild(text_id);
			//name的td
			var td_name = document.createElement("td");
			var text_name = document.createTextNode(name);
			td_name.appendChild(text_name );
			//gender的td
			var td_gender = document.createElement("td");
			var text_gender = document.createTextNode(gender);
			td_gender.appendChild(text_gender);
			//a标签的td
			var td_a = document.createElement("td");
			var ele_a = document.createElement("a");
			ele_a.setAttribute("href","javascript:void(0);");
			ele_a.setAttribute("onclick","delTr(this)");
			var text_a = document.createTextNode("删除");
			ele_a.appendChild(text_a);
			td_a.appendChild(ele_a);
			//创建tr
			var tr = document.createElement("tr");
			//5.添加td到tr中
			tr.appendChild(td_id);
			tr.appendChild(td_name);
			tr.appendChild(td_gender);
			tr.appendChild(td_a);
			//6.获取table
			var table = document.getElementsByTagName("table")[0];
			table.appendChild(tr);
		}
		function delTr(obj){
			var table = obj.parentNode.parentNode.parentNode;
			var tr = obj.parentNode.parentNode;
			table.removeChild(tr);
		}

2）

我们用一个更简单的方法来写出相同的效果，获取table的innerHTML然后直接修改。

		document.getElementById("btn_add").onclick = function(){
			//获取文本框内容
			var id = document.getElementById("id").value;
			var name = document.getElementById("name").value;
			var gender = document.getElementById("gender").value;
			
			//获取table
			var table = document.getElementsByTagName("table")[0];
			
			//追加一行
			table.innerHTML += "<tr>\n"	+
				"<td>"+id+"</td>\n"  +
				"<td>"+name+"</td>\n"   +
				"<td>"+gender+"</td>\n"  +
				"<td><a href=\"javascript:void(0);\" οnclick=\"delTr(this)\">删除</a><td>\n" +
			"</tr>";
		}
		function delTr(obj){
			var table = obj.parentNode.parentNode.parentNode;
			var tr = obj.parentNode.parentNode;
			table.removeChild(tr);
		}

3.结果
两种js代码的的运行结果相同，如下：
例子

Chasing stars
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
go学习笔记-文档-文档
07-21
go学习笔记-文档
Javascript学习笔记-学JS的一手教程
05-07
2.2.1 也可将javascript放入到单独的一个文件js文件，在需要使用的时候引入: 6 2.2.2 在超连接中使用javascript 7 2.2.3 在button中也可使用javascript 7 2.3 JAVASCRIPT的保留关键字 7 2.4 JAVASCRIPT的基本语法 7 ...
js实现列表删除
小苏(º﹃º )的博客
04-13 3915
利用js实现列表删除题目如下：实现步骤：方法一：方法二：方法三：方法四： 题目如下： 功能如下：   当点击清空时，所有项目全部清空，当点击删除时，对应项目跟着一起删除 实现步骤：   1.首先我们要创建出对应的列表和删除按钮   2.我们要给每个按钮绑定事件   3.通过点击按钮来删除对应的列表或清空列表   4.利用for循环来减少代码量 方法一：   利用this（当前对象）寻找父元素或兄弟元素来删除对应节点： <!DOCTYPE html> <html lang="en">
JavaScript删除列表元素的几种方法
热门推荐
qq_41132404的博客
03-01 2万+
参考文章：https://www.cnblogs.com/yun1108/p/9505294.html 老哥总结的真的很好，大家可以去给老哥点赞！ 这是我根据其文章整理的笔记，在这里与大家分享一下~ function print(index,arr) { console.log("---" + index + "---"); console.log(arr); } ①length 通过减小列表的长度length强制删除最后一个元素 var colors =
JavaScript_实现增删改操作（新增、删除、修改）
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
JavaScript实现列表的增删和移动
MyLove的博客
11-28 1494
JavaScript实现列表的增删和移动
原生JS多文件上传（增加，删除队列中准备上传的文件）
Azbtt的博客
10-08 1909
前端运用原生js来实现多图片的上传，并可以实现预览，队列删除，添加的效果。实现图片上传前的可控制化的效果
Python学习笔记--皮大庆.pdf.zip
10-11
Python学习笔记--皮大庆，非常适合零基础入门。对应英文版本《How to think like a computer scientist》
js学习笔记-章节学习记录
10-22
js学习笔记-章节学习记录
java学习笔记-Scokect.pdf
11-29
java学习笔记-Scokect.pdf
JS中对数组元素进行增删改移的方法总结
10-20
本文主要JS中对数组元素进行增删改移的方法，用表格的形式进行整理，方便阅读，具有很好的参考价值，下面就跟小编一起来看下吧
vue.js删除列表中的一行
12-29
splice(index,num,item1,item2,…,itemX) 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注：index–规定添加/删除项目的位置 num–要删除的项目数量 item–向数组添加的新项目 splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 (1)html代码： {{
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
10-23
主要介绍了JavaScript实现下拉列表框数据增加、删除、上下排序的方法,涉及javascript针对页面下拉列表框元素的添加、删除及移动的相关技巧,具有一定参考借鉴,需要的朋友可以参考下
用js实现的多文件上传还可以删除
a123lwlw的博客
05-25 426
*
JS增删改查常用方法
zhaoyifei01的博客
02-11 2092
增删改查
前端学习-第二阶段-day11
qq_34723035的博客
12-29 208
今日练习 利用事件代理，实现添加后的列表也可以触发点击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
JavaScript实现项目列表的增删移动
博客来自passerby&
12-08 4026
JavaScript实现项目列表的增删移动 在前面我们已经学习了html和css，相信大家对此应该有了相当的理解 想要完成此项任务我们需要准备以下知识点： Find()定义和用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 当数组中的元素在测试条件时返回 true 时
3.使用原生js实现简单列表的增加、修改、删除
m0_52065154的博客
03-21 3757
1.描述 /* 事件委托: 本来该子元素的事情 交给父元素, 父元素接收到事件之后, 会找到触发的子元素，交给子元素处理 原理: 事件加给父元素 通过触发源(target、srcElement)找到子元素 优点: 1. 执行速度快 2. 子元素可以发生在未来 描述： 点击添加按钮，弹出一个文本输入框，将输入的值，添加到ul列表中 点击ul的时候 判断触发源的innerText （使用事件委托）
js中删除json数据多余不要的数据
qq_16800845的博客
03-02 1323
const res = cmqm.map(item => { delete item.explanation delete item.more return item }); console.log(JSON.stringify(res))
javascript学习笔记--查看html元素和改变html的内容
最新发布
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值