jQuery实现增加和删除功能

以你之姓@ 2022-12-02 12:30 218阅读 0赞

代码如下：

<!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"> </td>
    				<td><button id="button1">submit</button></td>
    			</tr>
    		</table>
    		
    	</body>
    </html>