欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery实现对html结点的操作(创建,添加,删除)

程序员文章站 2022-05-30 10:12:43
...

效果图:
JQuery实现对html结点的操作(创建,添加,删除)

<!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>