JavaScript实现项目列表的增删移动

最新推荐文章于 2024-03-24 00:30:44 发布
最新推荐文章于 2024-03-24 00:30:44 发布
阅读量4k 收藏 48
点赞数 13
分类专栏： JavaScript作业集合 文章标签： js css javascript 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46100493/article/details/110849141
版权

JavaScript实现项目列表的增删移动

在前面我们已经学习了html和css，相信大家对此应该有了相当的理解
想要完成此项任务我们需要准备以下知识点：

Find()定义和用法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
find()语法：
array.find(function(currentValue, index, arr),thisValue)
currentValue表示当前元素，index表示当前元素的索引值，arr表示当前元素所属的数组对象，thisValue默认值是this表示当前对象

insertBefore() 方法

insertBefore() 方法在你指定的已有子节点之前插入新的子节点
insertBefore()语法
node.insertBefore(newnode,existingnode)
newnode表示需要插入的节点对象。
existingnode 在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。
Node 对象表示你插入的节点。

思路分析
想要完成这个项目首先我们要明白的是这属于html中的form标签知识，因此我们可以在外层套一个Div标签，然后在它里面插入一个ul标签里面下面用一个li标签来装input标签输入的内容，旁边的那些功能键我们就用span标签然后用js定义function来实现各种功能。这样我们就完成了上半部分。
下半部分我们同样是利用Div和span标签来完成布局。

运行结果：
在这里插入图片描述
运行代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js项目列表的增删和移动</title>
		<style>
			body{background:#ddd;text-align:center}
			.list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:lightsalmon;color:#000000;text-align:left;font-size:13px}
			.list-ul{list-style:none;margin:0;padding:0}
			.list-option{padding:6px 0;}
			.list-input{width:300px;border:1px solid #00FFFF;padding:5px;font-size:16px;color:#333}
			.list-input:hover{background:#effaff}
			.list-btn span{color:#0065A0;;cursor:pointer}
			.list-btn span:hover{text-decoration:underline}
			.list-btn b{text-align:center;background-color:#D6EDFF;border-radius:6px;width:20px;height:20px;display:inline-block;margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}
			.list-bottom{margin-top:5px}
			.list-add-show{color:#f60;cursor:pointer}
			.list-add-show:before{position:relative;top:1px;margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}
			.list-add-show span:hover{text-decoration:underline}
			.list-add-area{margin-top:5px}
			.list-add-add{cursor:pointer;margin-left:5px}
			.list-add-cancel{cursor:pointer;margin-left:4px}
			.list-add-input{width:180px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
			.list-add-input:hover{background:#effaff}
			.list-tmp{display:none}
			.list-hide{display:none}
    </style>
	</head>
	<body>
		<form action="" method="">  
			<div class="list">
				<ul class="list-ul">
					<li class="list-option">
						<input type="text" class="list-input" name="list[]" id="" value="" />
						<span class="list-btn">
							<span class="list-up"> [上移]</span>
							<span class="list-down"> [下移]</span>
							<span class="list-del"> [删除]</span>
						</span>
					</li>
				</ul>
				<div class="list-bottom" id="">
					<span class="list-add-show">添加项目</span>
					<div class="list-add-area list-hide">
						添加到列表
						<input type="text" class="list-add-input" name="list[]" id="list[]" value="" />
						<input type="button" class="list-add-add"  value="添加" />
						<input class="list-add-cancel" type="button" value="取消" />
						
					</div>
				</div>
			</div>
		</form>
		，<script type="text/javascript">
			(function(window) {
				var SmartList = function(prefix, defList) {
					Find.prototype.prefix = prefix;
					var find = new Find(document.getElementsByClassName(prefix)[0]); // 获取对象
					var list = new List(find.className('option'));
					for (var i in defList) {
						list.add(defList[i]);
					}
					
					var add = {
						'show':find.className('add-show'),	
						'area':find.className('add-area'),	
						'input':find.className('add-input'),	
						'add':find.className('add-add'),	
						'cancel':find.className('add-cancel')	
					};
					add.show.onclick = function() {	
						add.area.classList.remove(prefix + '-hide');
					};
					add.add.onclick = function()  {	
						list.add(add.input.value);
						
					};
					add.cancel.onclick =  function() {		
						add.area.classList.add(prefix + '-hide');
					};
				};
				function Find(obj) {
					this.obj = obj;
				}
				Find.prototype = {
					prefix: '', //待查找的前缀
					className: function(className) {
						return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
					},
					prev: function() {
						var node = this.obj.previousSibling; //	获取当前元素对象的前一个节点
						while (node) {
							if (node.nodeType === Node.ELEMENT_NODE) {
								break;
							}
							node = node.previousSibling;
						}
						return node;
					},
			 
					next: function() {
						var node = this.obj.nextElementSibling; //获取当前元素对象的后一个节点
						while (node) {
							if (node.nodeType === Node.ELEMENT_NODE) {
								break;
							}
							node = node.nextElementSibling;
						}
						return node;
					}
				}
				function List(tmp) { // List构造函数 参数tmp表示操作的<li>元素模板
					this.tmp = tmp;
					this.obj = tmp.parentNode; // 保存模板的父节点对象
					this.obj.removeChild(tmp); //从<ul>中移除<li>模板
				}
				List.prototype = {
					add: function(value) {
						var tmp = this.tmp.cloneNode(true); //克隆一个元素节点
						var find = new Find(tmp);
						find.className('input').value = value;
						var obj = this.obj; //获取ul元素对象
						find.className('up').onclick = function() { //添加上移单击事件
							var prev = find.prev(); //获取前一个节点
							if (prev) {
								obj.insertBefore(tmp, prev); //在prev前插入tmp
							} else {
								alert('这已经是第一张了');
							}
						};
						find.className('down').onclick = function() { 
							var last = find.next(); 
							if (last) {
								obj.insertBefore(next, tmp); 
							} else {
								alert('这已经是最后一张了');
							}
						};
						find.className('del').onclick = function() { 
							if (confirm('你确定要删除吗？')) {
								obj.removeChild(tmp);
							}
						}
						this.obj.appendChild(tmp);
					}
			 
				};
				window['SmartList'] = SmartList;
			})(window);
			SmartList('list', ['Java', 'Linux']);  //添加默认项目
		</script>
			
	</body>
</html>
passerby&
关注
  • 13
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript实现列表的增删和移动(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 161
JavaScript实现列表的增删和移动(附完整源码)
JS实现一个列表中包含上移下移删除等功能
10-25
一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
JavaScript实现列表的增删和移动
MyLove的博客
11-28 1566
JavaScript实现列表的增删和移动
纯JS+HTML简单表格增删改查
热门推荐
hikktn的博客
07-17 4万+
首先这两天写的一个简单增删改查，基本上靠百度和自学，完成的这个作业。 里面的功能十分的简陋，对于有需要的朋友一点点帮助吧。 这不是一条通往项目的链接：https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码：030a 里面有一些前期练习，如果心急，那就直接看index4.html吧，那是此次的网页实现，js文件放在js文件夹下。 然后，先给大家看......
javascript中类名的操作方法classList.add(),classList.remove(),classList.toggle(),classList.contains()
最新发布
m0_47892636的博客
03-24 386
javascript中类名的操作方法
JavaScript列表的增删与移动
Jasmyn1的博客
06-24 6980
案例：列表的增删与移动 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .list{ display:inline-block; background:#fff; color:#333; text-align:left;
十二、JavaScript面向对象（上） - 章节课后练习题及答案
熊先森的博客
06-29 4527
JavaScript面向对象（上） - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
JavaScript_实现增删改操作（新增、删除、修改）
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
面向对象实例-实现Tab选项卡的增删改功能
lhz_333的博客
11-14 356
使用面向对象的思想简单实现下tab选项卡功能
js第7章DOM案例：改变盒子大小、列表的增删和移动、购物车
WHT869706733的博客
12-05 4898
1.改变盒子大小 <style> .box{width:50px;height:50px;background:#eee;margin:0 auto;} </style> <body> <div id="box" class="box"></div> <script> var box = document.getElementById('box'); var i = 0;
列表记录的增加、删除以及向上向下移动的效果
hero5460的专栏
08-24 611
区域中-->function move(fbox,tbox) {var i = 0;if(fbox.value != "") {var no = new Option();no.value = fbox.value;no.text = fbox.value;tbox.options[tbox.options.length] = no;fbox.value = "";   }}function re
JQ实现列表增删以及上下移动
imsopoor的博客
03-27 1013
HTML <div class="box"> <ul> <li class="list-option"> <input class="list-input" type="text" value="HTML+CSS"> <span class="list-btn"> <span class="lis.
python列表基本操作之增删
jiankang66的博客
05-22 1348
博主简介：原互联网大厂tencent员工，网安巨头Venustech员工，阿里云开发社区专家博主，微信公众号java基础笔记优质创作者，csdn优质创作博主，创业者，知识共享者,欢迎关注，点赞，收藏。 目录一、背景二、增加元素四、参考五、总结 一、背景   Python 是一门易于学习、功能强大的编程语言。它提供了高效的高级数据结构，还能简单有效地面向对象编程。Python 优雅的语法和动态类型以及解释型语言的本质，使它成为多数平台上写脚本和快速开发应用的理想语言。下面我们来介绍一下python列表的.
js 数组的增删改查和对象的增删改查
一步一个脚印，踏实努力，向着目标前进
07-12 896
数组适用于需要按顺序存储和访问多个相同类型的数据的情况。常见的使用场景包括存储列表、遍历数据、进行排序和过滤等操作。
JavaScript前端开发 DOM 列表的增删和移动
IT_world_的博客
11-13 7062
利用DOM操作节点的方式实现列表的增删和移动 case.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表的增删和移动</title> <style> body{background:#ddd;te...
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 3336
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
使用js根据指定的内容添加、删除、修改列表中的内容
m0_65068333的博客
09-26 1255
增加删除修改内容
python列表元素移动_Python-列表-添加、删除、移动
weixin_40001372的博客
12-06 365
#def map(t):# res=[]# for i in t:# res.append(i)# return res#sum=[12,34,‘hello‘]#print(map(sum))#s=sum.pop(1) #pop删除下标的元素#print(sum)#sum.pop() #无下标，则删除列表最后一个元素#print(sum)#del sum...
列表的增加、删除、修改和查看（最最基本的操作，一定要掌握）
ymeng9527的博客
06-30 1266
（1）列表的增加（指的是给列表中添加元素） 方式一：直接添加 service = ['http','ssh','ftp'] print(service + ['firewalld']) 方式二：append:追加，追加一个元素到列表中 service = ['http','ssh','ftp'] service.append('firewalld') print(service) 方式...
javascript练习项目
05-11
以下是适合练习 JavaScript 的一些项目： 1. ToDo List - 制作一个简单的待办事项列表，用户可以添加、删除...以上这些项目都可以通过 JavaScript 来实现，如果你还有其他的想法，也可以自行设计一些小项目进行练习。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值