效果图：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">

			#install{

				display: none;

			}

			#save,#cancel{

				width: 100px;

				height: 30px;

			}

			.add{

				margin:10px 10px;

			}

			.add span{

				margin:10px 10px;

			}

		</style>

	</head>

	<body>

			<input type="button" id="add_btn" value="添加" />

		<table border="" cellspacing="" cellpadding="">

			<tr>

				<th>编号</th>

				<th>商品名称</th>

				<th>商品价格</th>

				<th>商品描述</th>

				<th>操作</th>

			</tr>

			<tr>

				<td>1</td>

				<td>华为</td>

				<td>￥2000</td>

				<td>描述1</td>

				<td>

					<a href="#">编辑</a>|<a href="#">删除</a>

				</td>

			</tr>

			<tr>

				<td>2</td>

				<td>华为</td>

				<td>￥2000</td>

				<td>描述2</td>

				<td>

					<a href="#">编辑</a>|<a href="#">删除</a>

				</td>

			</tr>

			<tr>

				<td>3</td>

				<td>华为</td>

				<td>￥2000</td>

				<td>描述3</td>

				<td>

					<a href="#">编辑</a>|<a href="#">删除</a>

				</td>

			</tr>

		</table>

		<div id="install">

			<div class="add">

				<h1>操作</h1>

			</div>

			<div class="add"><span>名称</span><input type="text" class="name" /></div>

			<div  class="add"><span>价格</span><input type="text" class="price" /></div>

			<div  class="add"><span>描述</span><input type="text" class="describe" /></div>

			<div  class="add">

				<input type="button" id="save" value="保存" />

				<input type="button" id="cancel" value="取消" />

			</div>

		</div>

		<script type="text/javascript">

			//修改完列表内容需要给号码排序

			function loop () {

				var num = $('tr td').length;

				console.log(num)

				for (var i=0;i<num;i+=5) {

					$('tr td').eq(i).text(i/5+1);

				}

			}

			//添加事件

			$('#add_btn').click(function  () {

				$('#install').show();

				type='tianjia';

			});

			//记录是第几个修改的结点

			var select;

			//记录当前的结点

			var node;

			//记录是修改是添加

			var type;

			//删除和修改

			$('tr td a').click(function() {

				//	console.log(this.text())

				//找节点删除

				if($(this).text() == '删除') {

					$(this).parent().parent().remove();

					//记得循环前面的列表号

					loop();

				} else {

					//给修改的时候赋值

					select=$(this).parent().prev().prev().prev().prev().text()

					node=$(this);

					$('#install').show();

					console.log(select)

					$('.name').val($(this).parent().prev().prev().prev().text())

					$('.price').val($(this).parent().prev().prev().text())

					$('.describe').val($(this).parent().prev().text())

					  type = 'xiugai';

				}

				//					this.parent().remove();

			})

			$("#save").click(function  () {

				if(type=='xiugai'){

				//修改的时候赋值

				node.parent().prev().prev().text($('.name').val())

				node.parent(). prev().prev().text($('.price').val())

				node.parent() .prev().text($('.describe').val())

				alert('保存成功')

				//修改完清空

				$('.name').val('')

					$('.price').val('')

					$('.describe').val('')

					$('#install').hide();

				}else{

					//创建所需结点

					var tr_ = $('<tr></tr>');

					var td_num = $('<td></td>');

					var td_name = $('<td></td>');

					var td_price = $('<td></td>');

					var td_describe = $('<td></td>');

					var td_a = $('<td><a href="#">编辑</a>|<a href="#">删除</a></td>');

					var num = $('tr td').length;

					//给节点赋值

					td_num.text(num);

					td_name.text($('.name').val())

					 td_price.text($('.price').val());

					  td_describe.text($('.describe').val());

					  //结点进行结构构造

					  tr_.append(td_num);

					  tr_.append(td_name);

					  tr_.append(td_price);

					  tr_.append(td_describe);

					  tr_.append(td_a);

					  //给table表插入数据

					  	$('table').last().append(tr_);

				}

					loop();

			})

			//点取消按钮清空添加表

				$("#cancel").click(function  () {

					$('.name').val('')

					$('.price').val('')

					$('.describe').val('')

					$('#install').hide();

				})

		</script>

	</body>

</html>

JQuery实现对html结点的操作（创建，添加，删除）的更多相关文章

  1. 通过vb.net 和NPOI实现对excel的读操作

    通过vb.net 和NPOI实现对excel的读操作,很久很久前用过vb,这次朋友的代码是vb.net写的需要一个excel的操作, 就顾着着实现功能了,大家凑合着看吧 Option Explicit ...

  2. Python中实现对list做减法操作介绍

    Python中实现对list做减法操作介绍 这篇文章主要介绍了Python中实现对list做减法操作介绍,需要的朋友可以参考下 问题描述:假设我有这样两个list, 一个是list1,list1 = ...

  3. dir（dict）|字典的创建-添加-删除-修改-判断存在-取值等相关操作

    dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...

  4. 使用代理实现对C# list distinct操作

    范型在c#编程中经常使用,而经常用list 去存放实体集,因此会设计到对list的各种操作,比较常见的有对list进行排序,查找,比较,去重复.而一般的如果要对list去重复如果使用linq dist ...

  5. Jquery实现对select的操作

    select实现对文本框的显示和隐藏 /** * 通过select的值实现对文本框的显示和隐藏 * #id为一个select控件 * .obj为一个文本框 */ function initSelect ...

  6. 利用C#实现对excel的写操作

    一.COM interop 首先我们要了解下何为COM Interop,它是一种服务,可以使.NET Framework对象能够与COM对象通信.Visual Studio .NET 通过引入面向公共 ...

  7. PHP实现对MongoDB的基础操作

    PHP扩展                                                                                      PHP5.2.PH ...

  8. 使用POI来实现对Excel的读写操作

    事实上我感觉直接贴代码就好了.代码里面差点儿做到每一行一个凝视.应该看起来会比較简单 代码托管在github上:https://github.com/chsj1/ExcelUtils package ...

  9. XMLHelper类 源码(XML文档帮助类,静态方法,实现对XML文档的创建,及节点和属性的增、删、改、查)

    以下是代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

随机推荐

  1. js理论-函数中的Arguments对象

    详情参考:https://github.com/mqyqingfeng/Blog/issues/14 如果: arguments和实参的关系,以及arguments的属性 附上代码和注解 functi ...

  2. python --函数学习之全局变量和局部变量

    定义在函数内部的变量拥有一个局部作用域,定义在函数外的拥有全局作用域. 局部变量只能在其被声明的函数内部访问,而全局变量可以在整个程序内访问. 在调用函数的时候,所有在函数内声明的变量名称都被加到作用 ...

  3. layui批量传值到后台操作时出现传值为空的问题

    如图,前台的样子,data的参数为 [ {"good_id":1,"good_name":"标样-总磷","good_num&qu ...

  4. 今天，你遇到redis线上连接超时了吗？

    一封报警邮件,大量服务节点 redis 响应超时. 又来,好烦. redis 响应变慢,查看日志,发现大量 TimeoutException. 大量TimeoutException,说明当前redis ...

  5. java ->IO流_字符流

    字符流 经过前面的学习,我们基本掌握的文件的读写操作,在操作过程中字节流可以操作所有数据,可是当我们操作的文件中有中文字符,并且需要对中文字符做出处理时怎么办呢? 字节流读取字符的问题 通过以下程序读 ...

  6. windows定时任务schtasks命令详细解

    SCHTASKS /Create [/S system [/U username [/P [password]]]] [/RU username [/RP password]] /SC schedul ...

  7. Redis学习笔记（十二） 复制（上）

    偷个懒,晚上工作忙的太晚,整个复制功能的内容还没有写完,这里先说一下复制功能的简单应用. 在Redis中,用户可以通过执行SLAVEOF命令或者设置slaveof选项,让一个服务器去复制另一个服务器, ...

  8. 14.5 Go 爬虫

    14.5 Go 爬虫 爬虫库/框架 henrylee2cn/pholcus 幽灵蛛 星5200 gocrawl 星1700 colly 星7169 hu17889/go_spider 星1400 go ...

  9. Redis 消息中间件 ServiceStack.Redis 轻量级

    问题: 公司开了个新项目,算上我一共3个人.车间里机台通过流水线连通联动的玩意.一个管理控制系统连接各个机台和硬件.专机类型就有5种,个数差不多20个左右. 软件规划的时候采用总分的结构,管理控制系统 ...

  10. WebApiClientCore使用说明

    前言 我是WebApiClient库的作者,目前在开发其.netcore版本,在整理其readme后,想想一来这部分内容可能对大家有用,二来兴许能给WebApiClient带人更多人气,所以将read ...