效果图：

<!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. Linux 物理卷(PV)、逻辑卷(LV)、卷组(VG)管理

    (一)相关概念 逻辑卷是使用逻辑卷组管理(Logic Volume Manager)创建出来的设备,如果要了解逻辑卷,那么首先需要了解逻辑卷管理中的一些概念. 物理卷(Physical Volume, ...

  2. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  3. Linux，Unix，GNU 到底有什么样的渊源？

    Linux,Unix, GNU,你可能经常听到这些名字被放在一起,比如 “Linux是类Unix系统”, “Linux其实应该叫 GNU/Linux” 等等.为什么会有这些说法,这些名词的历史渊源和背 ...

  4. SpringData:关联查询

    一.查询方式 1.导航式查询 使用“对象.属性”   进行查询:对于多的查询, 默认就是延迟加载,添加注解@Transactional 在OneToMany 注解中需要添加属性   fetch:值:F ...

  5. srping mvc RequestMapping实现

    spring mvc中定义请求的url只需要在方法上添加注解: @RequestMapping("aa.mvc")即可定义访问的url地址,但是你是否有考虑过为什么添加这个注解就可 ...

  6. nodejs上使用sql

    1.首先本地要安装mysql, https://www.mysql.com/downloads/. 2.在node中连接mysql,要安装mysql驱动,也就是npm安装mysql模块:npm i m ...

  7. python字符串str

    字符串str常用操作方法(都会产生新的数据) 1.取值: (1)索引:s[0] (2)切片:s[起始索引:结束索引:步长] 起始索引为0,可以省略 s最后一个索引可以取-1 结束索引省略,默认取到最后 ...

  8. 【数字图像处理】OpenCV中cv2.imread()与PIL中Image.open()的差别

    cv2.imread()与PIL中Image.open()两个函数都是用来读取图像,但是在使用过程存在一些差别. 1. 首先,从导入库方面看: # opencv-python import cv2 # ...

  9. 战略威慑 51nod提高组试题

    AC通道 题目背景 马奥雷利亚诺布恩迪亚上校发动了他的第三十二次战争,让我们祝他好运. 题目描述 马孔多附近有n个城市, 有n-1条双向道路连通这些城市.上校想通过摧毁两条公路的方式对当局予以威慑.但 ...

  10. 漫谈碎片化学习(Fragmentation learning)

    碎片化学习(Fragmentation Learning) 从一个互联网小段子讲起: 某天,美国情报部门FBI应奥巴马的要求,做相关汇报:“报告总统,经FBI分析,中国‘短信’中35%是节日祝福语,2 ...