📄 18.html

📁 文件是《精通Javascript+jQuery》的书中实例
💻 HTML
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>网络报价单</title>
<link href="18.css" type="text/css" rel="stylesheet" />
<!--[if lte IE 8]>
<style type="text/css">
#formcontainer {
	top:34px;
}
</style>
<![endif]-->
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
$(function(){
	$("td:first-child, th:first-child").addClass("side");
	$("td:nth-child(4), th:nth-child(4)").addClass("on");
	
	$("td a").click(function(){
		//点击选择按钮，首先获取该按钮的列号
		var iNum = $(this).parents("tr").find("td").index($(this).parent()[0])+1;
		//除了最左边的“容量”、“百兆附件”那一列，全部去掉on属性，然后隐藏
		$("td:not(:first-child), th:not(:first-child)").removeClass("on").hide();
		//显示用户选中的那一列，同时显示注册单
		$("td:nth-child("+iNum+"), th:nth-child("+iNum+")").addClass("on").show();
		$("#formcontainer").show();
	});	
	$("#formcontainer").hide();
	
	//没填写注册单之前，提交按钮不可用
	$("input[type=image]:eq(0)").attr("disabled",true);
	
	$("input[type=image]:eq(1)").click(function(){
		$("#formcontainer").hide();
		$("td, th").show();
		return false;
	});
	
	$("input[type=image]:eq(0)").click(function(){
		var myOptions = {
			target: "#result"
		};
		$("#myForm").ajaxSubmit(myOptions);
		return false;	//避免浏览器的默认提交
	});

});
function CheckUser(oInput){
	//首先判断是否有输入，没有输入直接返回
	if(!oInput.value)
		return;
	$.get("18.aspx",{user:oInput.value.toLowerCase()},
		//用jQuery来获取异步数据
		function(data){
			if(data == "0"){
			 	$("#userNot").show();
				$("#userOk").hide();
				$("input[type=image]:eq(0)").attr("disabled",true);
			}
			else{
				$("#userNot").hide();
				$("#userOk").show();
				$("input[type=image]:eq(0)").attr("disabled",false);
			}
		}
	);
}
function CheckPwd(){
	if($("#password1").val() != $("#password2").val()){
		$("#pwdNot").show();
		$("#pwdOk").hide();
		$("input[type=image]:eq(0)").attr("disabled",true);
	}
	else{
		$("#pwdNot").hide();
		$("#pwdOk").show();
		$("input[type=image]:eq(0)").attr("disabled",false);
	}
}
</script>
</head>
<body>
<div id="prices">

<div id="formcontainer">
	<h2>申请注册</h2>
	<div id="result">
	<form id="myForm" action="result.aspx">
		<fieldset>
			<label for="email" class="email">
				用户名:<br><input id="email" name="email" type="text" onblur="CheckUser(this)">
				<span id="userOk"><img src="UserOk.png"></span><span id="userNot"><img src="UserNot.png"></span>
			</label>
			<label for="crazypassword" class="password">
				密码:<br><input id="password1" name="password1" type="password">
			</label>
			<label for="retype" class="retype">
				密码确认:<br><input id="password2" name="password2" type="password" onblur="CheckPwd()">
				<span id="pwdOk"><img src="UserOk.png"></span><span id="pwdNot"><img src="UserNot.png"></span>
			</label>
		</fieldset>
		<fieldset class="buttons">
			<input type="image" src="button_submit.gif">
			<input type="image" src="button_cancel.gif">
		</fieldset>
	</form>
	</div>
</div>
<table>
	<thead>
		<tr>
			<th>&nbsp;</th>
			<th>豪华型</th>
			<th>经典型</th>
			<th>实用型</th>
			<th>任意型</th>
			<th>自由型</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>&nbsp;</td>
			<td><a href="#"><img src="choose.gif"></a></td>
			<td><a href="#"><img src="choose.gif"></a></td>
			<td><a href="#"><img src="choose.gif"></a></td>
			<td><a href="#"><img src="choose.gif"></a></td>
			<td><a href="#"><img src="choose.gif"></a></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>容量</td>
			<td>10G</td>
			<td>5G</td>
			<td>2G</td>
			<td>1G</td>
			<td>200M</td>
		</tr>
		<tr>
			<td>百兆附件</td>
			<td><img src="check.png" alt="yes"></td>
			<td><img src="check.png" alt="yes"></td>
			<td><img src="check.png" alt="yes"></td>
			<td></td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>短信通知</td>
			<td><img src="check.png" alt="yes"></td>
			<td><img src="check.png" alt="yes"></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>价格</td>
			<td>￥500元/年</td>
			<td>￥200元/年</td>
			<td>￥120元/年</td>
			<td>￥80元/年</td>
			<td>￥50元/年</td>
		</tr>
	</tbody>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -