jQuery表格和表单

表格

<style>
    .main {
        width: 500px;
        margin: 10px auto;
    }

    table {
        width: 400px;
        text-align: center;
        border-collapse: collapse;
    }

    th, td {
        padding: 5px;
        border: 1px solid black;
    }
    /* 偶数行样式*/
    .even {
        background-color: #FFF38F;
    }

    /* 奇数行样式*/
    .odd {
        background-color: #FFFFEE;
    }

    .selected {
        background: #FF6500;
        color: #fff;
    }
</style>
<script src="../js/jquery-3.1.1.js"></script>
<script>
   	$(document).ready(function(){
   		//设置thead背景颜色
   		$("thead").css("background","grey");
   		//tbody隔行变色
		//$("tbody>tr:even").addClass("even");     	
		//$("tbody>tr:odd").addClass("odd"); 
		$.each($("tbody>tr"),function(){
			if($(this).index()%2==0){
				$(this).addClass("even");
			}else{
				$(this).addClass("odd");
			}
		});
   		// 高亮显示
      	//$("tbody>tr:contains('李四')").addClass("selected");
      	//点击选中，如果本来就选中，则取消选中状态
      	$("tbody >tr").click(function(){
      		// 判断当前行是否包含selected样式
      		if($(this).hasClass("selected")){
      			// 移除样式同时取消选中checkbox
      			$(this).removeClass("selected").find(":checkbox").prop("checked",false);
      		}else{
      			// 增加样式，同时选中checkbox
      			$(this).addClass("selected").find(":checkbox").prop("checked",true);
      		}
      	});
   		//实现全选/全不选
   		$("thead input[name='choice']").change(function(){
   			//alert($(this).prop("checked"));
   			// 使用attr只能设置，不能取数据
   			//$("tbody input[name='choice']").attr("checked",this.checked);
   			//$("tbody input[name='choice']").attr("checked",$(this).prop("checked"));
   			//$("tbody input[name='choice']").prop("checked",$(this).prop("checked"));
   			$("tbody input[name='choice']").prop("checked",this.checked);
   		});
   	});
</script>

复选框

<!--
    比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,
    值为"checked"但没选中获取值就是undefined。
    jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，
    以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
    什么时候使用attr()，什么时候使用prop()？
    1.添加属性名称该属性就会生效应该使用prop();
    2.是有true,false两个属性使用prop();
    3.其他则使用attr();
-->
<script src="../js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function(){
    	//全选/全不选
    	$("#selectAll").change(function(){
    		$("input[name='items']").prop("checked",this.checked);
    	});
    	//全选
    	$("#checkedAll").click(function(){
    		$("input[name='items']").prop("checked",true);
    	});
    	//全不选
    	$("#checkedNo").click(function(){
    		$("input[name='items']").prop("checked",false);
    	});
    	//反选
    	$("#checkRev").click(function(){
    		$("input[name='items']").each(function(){
    			//$(element).prop("checked",!$(element).prop("checked"));
    			this.checked=!this.checked;
    		});
    	});
    	//获得选项的值
    	$("#checkValue").click(function(){
    		var result="";
    		$("input[name='items']").each(function(){
    			if(this.checked){
    				result += $(this).val()+"\n";
    			}
    		});
    		alert(result);
    	});
    });
</script>

下拉框

<script src="../js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function () {
        //移到到右边
      	$("#btnAdd").click(function(){
      		$("#select1 option:selected").appendTo($("#select2"));
      	});
        //全部移动到右边
      	$("#btnAdd_all").click(function(){
      		$("#select1 option").appendTo($("#select2"));
      	});
</script>

表单验证

<script src="../js/jquery-3.1.1.js"></script>
<script>
	// var pattern = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/; //用户名
	// var pattern = /^[a-zA-Z0-9]{6,20}$/;//验证密码
	// var pattern=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//邮箱
	// var pattern=/^[1-9]\d{10}$/;//验证手机号
	$(document).ready(function(){
		var isUserName = false;
		var isPwd = false;
		var isSPwd = false;
		var isEmail = false;
		var isPhone = false;
		// 验证用户名
		$("#userName").focus(function(){
			$(this).addClass("focus");
		}).blur(function(){
			var pattern = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,19}$/;
			if(!pattern.test($(this).val())){
				$(this).addClass("blur");
				$(this).next()
				.removeClass("default").addClass("fail");
			}else{
				// 验证通过
				isUserName = true;
				$(this).removeClass("blur");
				$(this).next().text("√").removeClass().addClass("success");
			}
		});
		// 验证密码
		$("#userPwd").blur(function(){
			var pattern = /^[a-zA-Z0-9]{6,20}$/;
			if(!pattern.test($(this).val())){
				$(this).next().removeClass("default")
				.addClass("fail");
			}else{
				$(this).next().text("√").removeClass()
				.addClass("success");
				isPwd = true;
			}
		});
		
		// 确认密码
		$("#userSPwd").blur(function(){
			var pwd = $("input[name='password']").val();
			// 比较两次密码是否一致
			if(pwd!=$(this).val().trim()){
				$(this).next().text("两次密码输入不一致")
				.removeClass("default").addClass("fail");
			}else{
				$(this).next().text("√").removeClass()
				.addClass("success");
				isSPwd = true;
			}
		});
		
		// 表单验证
		$("#btnRegister").click(function(){
			// 验证所有的必填项
			var flag = isUserName&&isPwd&&isSPwd;
			if(flag){
				// 验证通过，提交表单
				$("form").submit();
			}else{
				alert("请填写完整信息");
				return false;
			}
		});
	});
</script>