JQuery作业

最新推荐文章于 2024-06-26 10:23:17 发布

尝胆

最新推荐文章于 2024-06-26 10:23:17 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_38809741/article/details/88429024

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

动态添加员工

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
 
    <style>
        body * {
            margin: 0px;
            padding: 0px;
        }

        #empAdd, #empInfo {
            width: 600px;
            margin: 10px auto;
            padding: 10px 0px;
            text-align: center;
        }

            #empAdd fieldset {
                height: 100px;
            }

        .btn {
            margin-top: 5px;
            width: 60px;
        }

        table {
            border-collapse: collapse;
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        thead {
            background-color: #e6e5e5;
        }

        td, th {
            border: 1px solid #808080;
            width: 100px;
            height: 30px;
        }

        #foot {
            width: 100px;
            margin: 0 auto;
        }

        /* 偶数行样式*/
        .even {
            background-color: #FFF38F;
        }

        /* 奇数行样式*/
        .odd {
            background-color: #FFFFEE;
        }
        
        .selected {
            background: #FF6500;
            color: #fff;
        }
    </style>
    
    <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
    <script>
    	$(function(){
    		//重置   			
    		//$("fieldset").wrap("<form></form>");
    		//表单验证
    		function valiDate(){

	    		//验证
	    		if($("#UserName").val().trim().length==0){
	    			alert("员工姓名不能为空");
	    			return false;
	    		}else if($("#UserAge").val().trim().length==0){
	    			alert("员工年龄不能为空");
	    			return false;
	    		}else{
	    			return true;
	    		}
    	    }
    		
    		//添加员工
    		$("#btnAdd").click(function(){
    			if(valiDate()){
	    		//创建tr元素节点
	    		var $tr=$("<tr></tr>");
	    		var $age = $("#UserAge").val()
	    		var $name = $("#UserName").val();
	    		var $job = $("#position").find("option:selected").text();
	    		$tr.html("<td><input type='checkbox' name='select' /></td> <td>"+$name+"</td> <td>"+$age+"</td> <td>"+$job+"</td> <td><input type='button' class='delBtn' value='删除' /></td>")
	    		
//	    		//创建td
//	    		var $td_select=$("<td><input type='checkbox' name='select'/></td>  <td></td>");	    			    		
//	    		//员工年龄
//	    		
//	    		var $td_Age=$("<td></td>").text($("#UserName").val());	 
//	    		
//	    		//员工姓名
//	    		var $td_Name=$("<td></td>").text($("#UserAge").val());		    		
//	    		//职位
//	    		var $td_Job=$("<td></td>").text($("#position").find("option:selected").text());	    		
//	    		//删除
//	    		var $td_Del=$("<td><input type='button' class='delBtn' value='删除' /></td>");		    		
//	    		//把td添加到tr中
//	    		$tr.append($td_select);
//	    		$tr.append($td_Age);
//	    		$tr.append($td_Name);
//	    		$tr.append($td_Job);
//	    		$tr.append($td_Del); 
	    		
	    		
	    		//把tr添加到tbody中
	    		$("tbody").append($tr);				
    			} 
    			
    			//删除单行员工
	    		$(".delBtn").click(function(){
	    			$(this).parent().parent().remove();
	    			//alert(11);
	    		})
	    		
	    		//全选/不选
	    		$("th input").change(function(){
	    			$("td input[type='checkbox']").prop("checked",this.checked);
	    		})
    		
    			//多选删除
    			$("#btnDelete").click(function(){
    				if($("td input[type='checkbox']:checked")){
    					$("td input[type='checkbox']:checked").parent().parent().remove();
    				}
    			})
    	    			
    		})
 		
    	})
    </script>
</head>
<body>

    <div id="empAdd">

        <fieldset>
 <form>
            <legend><strong>添加员工</strong></legend>

            <label>姓名:</label>
            <input type="text" size="15" id="UserName" name="username" value="" />
            <label>年龄:</label>
            <input type="text" size="15" id="UserAge" name="age" value="" />
            <label>职位:</label>
            <select id="position">
                <option value="0">程序员</option>
                <option value="1">设计师</option>
                <option value="2">项目经理</option>
            </select>
            <br /><br />
            <div>
                <input type="button" class="btn" id="btnAdd" value="添加" />
                <input type="reset" class="btn" id="btnReset" value="重置" />
            </div>
</form>  
        </fieldset>

    </div>
    <div id="empInfo">
        <fieldset>
            <legend><strong>员工管理</strong></legend>

            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="ckAll" value="0"></th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>职位</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div id="control">
                <button class="btn" id="btnDelete">删除信息</button>
            </div>
        </fieldset>
    </div>

</body>
</html>