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>