jQuery simpleDemo

最新推荐文章于 2024-08-10 08:36:07 发布

_noname

最新推荐文章于 2024-08-10 08:36:07 发布

阅读量760

点赞数

分类专栏： web 文章标签： jquery javascript

本文链接：https://blog.csdn.net/williamfan21c/article/details/53984864

版权

web 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工管理---</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="em.js"></script>
</head>
<body>
<center>
	<br> <br> 添加新员工 <br> <br> 
	name: <input type="text" name="name" id="name" />   
	email: <input type="text" name="email" id="email" />   
	salary: <input type="text" name="salary" id="salary" /> <br> <br>
	<button id="addEmpButton">Submit</button>
	<br> <br>
	<hr>
	<br> <br>
	<table  border="1" cellpadding="5" cellspacing=0>
		<tbody id="employeetable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=1">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=2">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=3">Delete</a></td>
			</tr>
		</tbody>

	</table>
</center>
</body>
</html>

em.js

$(function(){
	//<button id="addEmpButton">Submit</button>
	$("#addEmpButton").click(function(){
		var name = $("#name").val();
		var email = $("#email").val();
		var salary = $("#salary").val();
		
		/*
		 	<tr>
				<td>name</td>
				<td>email</td>
				<td>salary</td>
				<td><a href="deleteEmp?id=3">Delete</a></td>
			</tr>
		 */
		var id = $("tr").size();
		alert(id);
		//方法链调用
		var $tr = $("<tr>").append("<td>"+name+"</td>")
					.append("<td>"+email+"</td>")
					.append("<td>"+salary+"</td>")
					.append('<td><a href="deleteEmp?id='+id+'">Delete</a></td>');
		$tr.find("a").click(deleteEmp);
		
		$("tbody").append($tr);
	});
	
	var deleteEmp = function(){
		alert("-----");
		//this: 代表发生事件的标签
		$(this).parent().parent().remove();
		
		return false;//让链接失效
	};
	
	//给所有<a>添加点击事件
	$("a").click(deleteEmp);
	
});

html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>选择爱好</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="checkbox.js"></script>
	</head>
<body>
	<form method="post" action="">
	   	<h3>你爱好的运动是？</h3>
	   	<input type="checkbox" id="checkedAll_2"/>全选/全不选
	   	<br/>
	    <input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="羽毛球"/>羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球
	   	<br/>
	    <input type="button" id="CheckedAll" value="全　选"/>
	    <input type="button" id="CheckedNo" value="全不选"/>
	    <input type="button" id="CheckedRev" value="反　选"/> 
	
		<input type="button" id="send" value="提　交"/> 
	</form>
</body>
</html>

checkbox.js

$(function(){
	//给"全选"添加点击事件
	$("#CheckedAll").click(function(){
		//alert("=========");
		//checked=true
		$(":checkbox[name=items]").attr("checked", true);
		
		$("#checkedAll_2").attr("checked", true);
	});
	
	//给"全不选"添加点击事件
	$("#CheckedNo").click(function(){
		//alert("=========");
		//checked=true
		$(":checkbox[name=items]").attr("checked", false);
		$("#checkedAll_2").attr("checked", false);
	});
	
	//给"反选"添加点击事件
	$("#CheckedRev").click(function(){
		//var check = this.checked;//得到当前选中的状态
		//遍历
		$(":checkbox[name=items]").each(function(){
			var check = this.checked;//得到当前选中的状态
			//alert(check);
			$(this).attr("checked", !check);
		});
		
		//如果没有被选中的选项个数为0,就是选中
		$("#checkedAll_2").attr("checked",$(":checkbox[name=items]:not(:checked)").size()==0 );
	});
	
	//给"全选/全不选"添加点击事件
	$("#checkedAll_2").click(function(){
		var check = this.checked; //当前点击的"全选/全不选"的状态
		$(":checkbox[name=items]").attr("checked", check);
	});
});