jQuery事件二

效果图如下:

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		
		<style type="text/css">
			table {
				border: 1px solid #CCCCCC;
				border-collapse: collapse;
				width: 400px;
			}			
			
			td {
				border: 1px solid #CCCCCC;
			}
			
		</style>
		
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(function(){
				/**
				 * 全选
				 */
				$("input[name=selectAll]").click(function() {
					 $("input[type=checkbox]").prop("checked", true);
				});
				
				/**
				 * 不选
				 */
				$("input[name=cancel]").click(function() {
					$("input[type=checkbox]:checked").each(function(){
						$(this).prop("checked", false);						
					});
				});
				
				/**
				 * 添加一行
				 */
				var content = "<tr><td><input type='checkbox'/></td><td>hello</td><td>hello</td><td>hello</td></tr>";
				$("input[name=addRow]").click(function() {
					$("table").append(content);					
				});
				
				/**
				 * 删除选中行
				 */
				$("input[name=deleteRow]").click(function(){
					$("input[type=checkbox]:checked").each(function(){
						$(this).parent().parent().remove();					
					});
				});
								
				
			})
		</script>
	</head>
	<body>
		<input type="button" name="selectAll" value="全选" />
		<input type="button" name="cancel" value="不选" />
		<input type="button" name="addRow" value="添加一行" />
		<input type="button" name="deleteRow" value="删除选中行" />
		<br/>
		<br/>
		<table>
			<tr>
				<td>
					<input type="checkbox" />
				</td> 
				<td>1_1</td> 
				<td>1_2</td> 
				<td>1_3</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td> 
				<td>2_1</td>
				<td>2_2</td> 
				<td>2_3</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td> 
				<td>3_1</td> 
				<td>3_2</td> 
				<td>3_3</td>
			</tr>
		</table>
	</body>
</html>


你可能感兴趣的:(jQuery事件二)