jQuery实现增加和删除功能

最新推荐文章于 2023-04-17 19:11:51 发布

LRight-T

最新推荐文章于 2023-04-17 19:11:51 发布

阅读量1.5k

点赞数

文章标签： jquery html

本文链接：https://blog.csdn.net/qq_44604924/article/details/108312574

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用jQuery实现增加和删除</title>
		<style type="text/css">
			#table1{
				height: 200px;
				width: 500px;
				border: solid 1px black;
				margin: 0 auto;
			}
			#table1 td{
				width: 500px;
				height: 30px;
				border: solid 1px black;
			}
			#table1 th{
				width: 500px;
				height: 30px;
				border: solid 1px black;
			}
			#form1{
				width: 500px;
				height: 300px;
				border: solid 1px black;
				margin: 0 auto;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//删除
//				$('#tbody1 a').click(function(){
//					var $theTr = $(this).parent().parent();//找到点击的超链接的tr
//					var name = $theTr.children(':first').html();
//					if(confirm("确定删除"+name+"吗?")){
//						$theTr.remove();
//					}
//					
//					});
/*使用事件的委派，$(parentElement).delegate(childrenElemnet,eventName,callback),
 * 移除事件的委派用$(parentElement).undelegate(eventName)
 */
				$('#tbody1').delegate('a','click',function(){
					var $theTr = $(this).parent().parent();//找到点击的超链接的tr
					var name = $theTr.children(':first').html();
					if(confirm("确定删除"+name+"吗?")){
						$theTr.remove();
				}
				});
			//添加
			$('#button1').click(function(){
				//得到输入的数据
				var name = $('#name').val();
				var email = $('#email').val();
				var salary = $('#salary').val();
				
				//创建要添加的结构
				$('<tr></tr>') 
				.append('<td>'+name+'</td>')
				.append('<td>'+email+'</td>')
				.append('<td>'+salary+'</td>')
				.append('<td><a href="javascript:;">Delete</a></td>')
				.appendTo('#tbody1');
//				.find('a').click(function(){
//					var $theTr = $(this).parent().parent();//找到点击的超链接的tr
//					var name = $theTr.children(':first').html();
//					if(confirm("确定删除"+name+"吗?")){
//						$theTr.remove();
//					});
				//清除输入
				$('#name').val("");
				$('#email').val("");
				$('#salary').val("");
				
			});
			
			});
		
			
		</script>
			
	</head>
	<body>
		<table id="table1" cellspacing="0">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>Del</th>
				</tr>
			</thead>
			<tbody id="tbody1">
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
				<tr>
					<td>Jerry</td>
					<td>jerry@jerry.com</td>
					<td>8000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>Bob@bob.com</td>
					<td>10000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
				
			</tbody>
			
		</table>
		<br /><br />
		<h2>添加新元素</h2>
		<table id="table2">
			
			<tr>
				<td>name:</td>
				<td><input type="text" id="name"/></td>
			</tr>
			<tr>
				<td>email:</td>
				<td><input type="text" id="email"/></td>
			</tr>
			<tr>
				<td>salary:</td>
				<td><input type="text" id="salary"/></td>
			</tr>
			<tr>
				<td colspan="2" align="center">&nbsp;</td>
				<td><button id="button1">submit</button></td>
			</tr>
		</table>
		
	</body>
</html>