效果图：

<!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. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized的报错问题

    url的问题 这个是根据使用的数据库版本不同而出现的错误,mysql8.0以上版本在使用URL时如果使用的语句是 url=jdbc:mysql://localhost:3306/book 是会报错的, ...

  2. case when的使用-解决分表查数据给某一个字段

    一个表中存的是目前有效的菜单,另外一个表中存的是有效菜单的历史更改数据 需要查询历史数据的时候,带上访问的历史数据菜单名称 SELECT msg.msg_id, msg.from_user_name, ...

  3. equals(), "== ",hashcode() 详细解释

    Object 通用方法容易混淆的定义 先搞清楚各自的定义 "==" 用来判断 相等 equals() 用来判断 等价 hashcode() 用来返回散列值 "==&quo ...

  4. 复变函数-MINDMAPS-continuous updating

  5. sqlservere小计合计总计

    SELECT CASE WHEN GROUPING(F1) = 1 THEN '总计' WHEN GROUPING(F1) = 0 AND GROUPING(F2) = 1 THEN F1+'合计' ...

  6. c# 贪吃蛇小游戏

    ------------恢复内容开始------------ 新手学习c# 在博客园上看到后自己模仿打出来的第一个程序  开心,纪念一下 bean :食物类 block :蛇块类 snake :蛇类 ...

  7. tcp/ip 学习（一）

    TCP/IP协议是什么? TCP:Transmission Control Protocol  传输控制协议 IP:Internet Protocol  因特网协议 简单来说,TCP/IP协议就是一个 ...

  8. .net core kafka 入门实例 一篇看懂

      kafka 相信都有听说过,不管有没有用过,在江湖上可以说是大名鼎鼎,就像天龙八部里的乔峰.国际惯例,先介绍生平事迹   简介 Kafka 是由 Apache软件基金会 开发的一个开源流处理平台, ...

  9. React组件setState

    注意: 1. 自定义组件首字母必须大写.这里是以函数表达式的方式定义子组件的. 2. 使用 ES6 的 class 关键字创建的 React 组件,组件中的方法遵循与常规 ES6 class 相同的语 ...

  10. python函数总结，你值得拥有

    目录 函数总结 函数定义与结构 函数名的使用 函数的参数 名称空间与作用域 名称空间 作用域 函数嵌套 内置函数(globals( ),locals( )) global+nonlocal 可迭代对象 ...