jquery之列表的增删和移动

最新推荐文章于 2023-06-21 17:08:56 发布
最新推荐文章于 2023-06-21 17:08:56 发布
阅读量2.2k 收藏 17
点赞数 3
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43696174/article/details/105733908
版权

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css1.css"/>
    <title>列表的增删和移动</title>
    <script src="../jquery.js"></script>
    <script src="js1.js"></script>
      </head>
  <body>
    <form>
      <div class="list">
        <ul class="list-ul">
           <li class="list-option">
            <input class="list-input" type="text" value="HTML+CSS">
            <span class="list-btn">
              <span class="list-up">[上移]</span>
              <span class="list-down">[下移]</span>
              <span class="list-del">[删除]</span>
            </span>
          </li>
          <li class="list-option">
            <input class="list-input" type="text" value="JavaScript">
            <span class="list-btn">
              <span class="list-up">[上移]</span>
              <span class="list-down">[下移]</span>
              <span class="list-del">[删除]</span>
            </span>
          </li>
          <li class="list-option">
            <input class="list-input" type="text" value="c">
            <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">
          <span id="show" class="list-add-show"><span>添加项目</span></span>
          <div id="div1" class="list-add-area list-hide">
            添加到列表：
            <input class="list-add-input" type="text" name="list[]">
            <input  id="bt1" class="list-add-add" type="button" value="添加">
            <input  id="bt2" class="list-add-cancel" type="button" value="取消">
          </div>
        </div>
      </div>
    </form>
     </body>
</html>

js代码：

// JavaScript Document
$(function(){
	//添加项目
	$('span.list-add-show').click(function(){
		 $('#div1').removeClass('list-hide');
		});
	//取消
	$('.list-add-cancel').click(function(){
		$('#div1').addClass('list-hide');
		});
	//添加
	$('.list-add-add').click(function(){
		var $li=$('<li class="list-option"><input class="list-input" type="text"><span class="list-btn"><span class="list-up">[上移]</span><span class="list-down">[下移]</span><span class="list-del">[删除]</span></span></li>');
		$('.list-ul').append($li);
		$('input.list-input:last').val($('input.list-add-input').val());
		$('input.list-add-input').val('');		
		});
	//上移
	$(".list-ul").on('click','.list-up',function(){
				var $li=$(this).parents('li');
		        $li.prev().before($li);					  
				});
	//下移
	$(".list-ul").on('click','.list-down',function(){
				var $li=$(this).parents('li');
		        $li.next().after($li);					  
				});
	//删除
	$(".list-ul").on('click','.list-del',function(){
				$(this).parents('li').remove();
		       					  
				});
	});

css代码：

@charset "utf-8";
/* CSS Document */
    <style>
      body{background:#ddd;text-align:center}
      .list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:#fff;color:#333;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 #ccc;padding:4px;font-size:14px;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>

轨道骑士
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5916
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
JavaScript实现项目列表的增删移动
博客来自passerby&
12-08 4082
JavaScript实现项目列表的增删移动 在前面我们已经学习了html和css，相信大家对此应该有了相当的理解 想要完成此项任务我们需要准备以下知识点： Find()定义和用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 当数组中的元素在测试条件时返回 true 时
jquery中删除元素的remove（）方法
Black_Customer的博客
09-15 3184
今天看jquery中删除元素的方法，包括remove（）方法和empty() 方法 remove（）方法为删除被选元素及子元素 empty() 方法为删除元素中的子元素 其中remove（）方法还有一个是过滤的作用，可以筛选出符合要选的元素 例如： $(document).reday(function(){ $("p").remove(".p1");//p1为一个p元素 }); 那么会删除名为p...
淘宝精选之精品展示
qq_43696174的博客
04-25 1274
HTML代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>精品展示</title> <link rel="stylesheet" href="css/good.css"> <script src="j...
JQuery 添加元素(jquery对象)，删除元素( .remove())
houyanhua1的专栏
12-17 1万+
append()，appendTo()：追加子(标签)元素。 $(a).append($(b))  等同于   $(b).appendTo($(a)) prepend()，prependTo()：前加子(标签)元素 after()，insertAfter()：后加兄弟(标签)元素 before()，insertBefore()：前加兄弟(标签)元素 empty()：清空所有子(标签)元素。
jQuery动态添加删除移动列表插件
06-10
本篇文章将详细讲解基于jQuery的动态添加、删除和移动列表插件的实现方法，以及如何利用相关代码进行数据操作。 首先，jQuery动态添加功能允许我们在用户交互时实时向页面中的列表添加新元素。例如，当你有一个表单...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
jquery表格增删改查.rar
05-05
在"jquery表格增删改查"项目中，我们首先会接触到Bootstrap的栅格系统和表格组件。Bootstrap的表格样式可以让数据展示更加美观，而栅格系统则帮助我们实现响应式布局，使得页面在不同设备上都能良好显示。 接下来，...
使用jquery实现好友列表的增删查
06-13
本项目"使用jquery实现好友列表的增删查"旨在通过jQuery来实现一个交互式的好友管理系统，具备添加、删除、分组和搜索等功能，这在社交网络应用中十分常见。 首先，我们要理解jQuery的核心概念。jQuery对象是jQuery...
Jquery与Bootstrap实现后台管理页面增删改查功能示例
10-20
总结来说，利用Jquery的便利性和Bootstrap的UI组件，可以轻松地构建出功能完善的后台管理页面，实现增删改查功能。尽管这个例子简单，但它涵盖了基本的CRUD操作和前端与后端的交互逻辑，为更复杂的后台管理系统提供...
JS实现一个列表中包含上移下移删除等功能
10-25
一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
js实现提交前对列表数据的增删改查
12-28
js实现列表数据的增删改查，AJAX提交后,js操作数据 最近工作中，有一处列表数据是页面初始化加载的，用户可以进行操作，因为这些数据并不存在数据库中，同时为了数据的整洁以及高效，所以要在页面进行增删改操作（其实查也可以，类似改），之前写过一个二维数组保存的，代码乱而且效率不高，后改用object 感觉还可以，主要是查询和删除的时候不需要自己遍历数组。 1. html 列表是用div+ul标签弄的，贴一些用到的片段 1.1 要展示的列表 列表标题 <div class=tab-list
jquery append,each,empty,remove方法总结
wusuopuBUPT的专栏
08-09 7751
最近项目中经常用到jquery，周末做个小结。 1.  .append()方法 /*this part of code addes a new li include img and link*/ var li_start = $(''); // $('#preview_image').append(li_start);
jQuery - remove() 方法
余光的博客
08-17 2308
这是我在面试中遇到的一个问题，知识点不难，希望我们共勉~ 移除所有 &lt;p&gt; 元素： $("button").click(function(){ $("p").remove(); }); 定义和用法 remove() 方法移除被选元素，包括所有文本和子节点。 该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。 但除了这个元素本身得以保...
jquery 删除数组
热门推荐
LYBWWP
05-12 3万+
例如删除C这个元素 ，前提不知道C在这个数组的下标 var arr = ['a','b','c','d'];         arr.splice($.inArray('c',arr),1); alert(arr);
JavaScript实现列表的增删和移动
MyLove的博客
11-28 1563
JavaScript实现列表的增删和移动
JavaScript数据结构 —— 列表List
weixin_48920282的博客
12-20 1万+
2.1 —— List的简述 列表是一组有序的数据，每个列表中的数据项称为元素。 列表拥有描述元素位置的属性，列表有前有后（front和end）。 使用next()方法可以从当前元素移动到下一个元素，使用next（） 可以从当前元素移动到下一个元素，使用prev()方法可以移动到当前元素的前一个元素，还可以使用moveTo(n)方法直接移动到指定位置 2.1 —— List的方法 定义的属性有： listSize : 列表的元素个数 pos： 列表的当前位置 定义的方法有: getE
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 3308
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
javascript练习：列表项目的增删
Mortal__的博客
11-11 498
效果图片： 代码效果动态图 基础结构与样式：HTML+Css部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表的增删和移动</title> <style> body { background: #ddd; text-align: center } .list {
jquery ajax实现增删
最新发布
08-27
引用中的代码展示了使用jQuery的ajax方法进行增删操作。其中，可以使用ajax的url参数指定请求的地址，method参数指定请求的方法（如"GET"或"POST"），data参数指定发送到服务器的数据，headers参数可以设置请求头...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值