jQuery实现添加修改删除行-li 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				width: 400px;
				margin: 0 auto 0;
				padding: 0;

				list-style: none;
			}

			li {
				line-height: 50px;
				border-bottom: 1px solid red;
			}

			.del,
			.update {
				float: right;
				height: 30px;
				line-height: 30px;
				margin-top: 10px;
				margin-left: 10px;
				color: #fff;
				text-align: center;
				padding: 0 5px;
			}

			.del {
				background: red;
			}

			.update {
				background: green;
			}

			button {
				display: block;
				margin: 20px auto 0;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//添加
				$('button').click(function(){
					var val = prompt('请输入内容');
					//防止用户没有输入内容
					if(val == null || val.trim() == '') return 0;
					var $li = $('<li>');
					$li.html(val + ' <span class="del">删除</span> <span class="update">修改</span>');
					$('ul').append($li);
				})
				// //删除 方法1
				// $('ul').on('click','.del',function(e){
				// 	console.log($(e.target));
				// 	$(this).parent().remove();
				// });
				// //修改
				// $('ul').on('click','.update',function(e){
				// 	console.log($(e.target));
				// 	var val = prompt('请输入内容');
				// 	//防止用户没有输入内容
				// 	if(val == null || val.trim() == '') return 0;
				// 	$(this).parent().html(val + ' <span class="del">删除</span> <span class="update">修改</span>');
				// });
				
				//修改 删除 方法2
				$('ul').on('click','span',function(e){
					//hasClass 判断有没有这个类名
					if($(this).hasClass('update')){
						var val = prompt('请输入内容');
						//防止用户没有输入内容
						if(val == null || val.trim() == '') return 0;
						$(this).parent().html(val + ' <span class="del">删除</span> <span class="update">修改</span>');
					}else if($(this).hasClass('del')){
						$(this).parent().remove();
					}
				})
				
			})
		</script>
	</head>
	<body>
		<ul>
			<li>列表1 <span class="del">删除</span> <span class="update">修改</span></li>
			<li>列表2 <span class="del">删除</span> <span class="update">修改</span></li>
			<li>列表3 <span class="del">删除</span> <span class="update">修改</span></li>
			<li>列表4 <span class="del">删除</span> <span class="update">修改</span></li>
			<li>列表5 <span class="del">删除</span> <span class="update">修改</span></li>
		</ul>
		<button>添加</button>
	</body>
</html>

 

posted @ 2020-04-24 20:45  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源