效果图：

<!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. 求二叉树的高度 递归&非递归实现

    /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * Tre ...

  2. srping mvc RequestMapping实现

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

  3. Docker & k8s 系列二：本机k8s环境搭建

    本篇将会讲解k8s是什么?本机k8s环境搭建,部署一个pod并演示几个kubectl命令,k8s dashboard安装. k8s是什么 k8s是kubernetes的简写,它是一个全新的基于容器技术 ...

  4. Python-MD5加密算法接口测试

    前言 在之前的Python系列的随笔中,我跟小伙伴们讲述了Python-AES加密算法接口测试和Python-SHA256加密算法接口测试,今天我们来学习一下登录密码是md5加密的情况下,该如何使用p ...

  5. nodejs上使用sql

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

  6. vue上的简单轮播图

    好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...

  7. 微信小程序小方块

    第一步:配置animation.wxml文件(相当于html显示的页面) <import src="../common/header.wxml" /> <impo ...

  8. How to create a angular2 project process

    步骤1. 设置开发环境 在开始工作之前,我们必须设置好开发环境. 如果你的机器上还没有Node.js®和npm 和VScode(因为我是用VS工具来编辑的), 请先安装它们. 然后全局安装 Angul ...

  9. DPDK Mbuf Library（学习笔记）

    1 Mbuf库 Mbuf库提供了分配和释放缓冲区(mbufs)的功能,DPDK应用程序可以使用这些mbufs来存储消息缓冲. 消息缓冲存储在内存池中,使用Mempool库. 数据结构rte_mbuf通 ...

  10. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...