java web 32 : 案例：员工信息管理系统

<!DOCTYPE HTML>
<html>
<head>
<title>模拟员工信息管理系统</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
    body{font-family: "微软雅黑"}
    h2, h4{ text-align: center; }
    div#box1, div#box2 {text-align:center;}
    hr{margin: 20px 0;}
    table{margin: 0 auto;width:70%;text-align: center;border-collapse:collapse;}
    td, th{padding: 7px; width:20%;}
    th{background-color: #DCDCDC;}
    input[type='text']{width:130px;}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    /* --- 添加一个新员工 --- */
    function addEmp(){
        var id = $("#box1 input[name='id']").val().trim();
        var name = $("#box1 input[name='name']").val();
        var email = $("#box1 input[name='email']").val();
        var salary = $("#box1 input[name='salary']").val();
        if( id==""||name==""||email==""||salary==""){
            alert("员工信息不能为空！");
            return;
        }
        var isExist = false;
        $("table tr").each(function(index, element){
            var tempId = $(element).find("td").eq(1).html();
            if(id==tempId){
                isExist = true;
            }
        })
        if(isExist){
            alert("该ID已存在，添加失败！");
            return;
        }
        var $tr = $("<tr></tr>");
        $tr.append("<td><input type='checkbox'/></td>");
        $tr.append("<td>"+id+"</td>");
        $tr.append("<td>"+name+"</td>");
        $tr.append("<td>"+email+"</td>");
        $tr.append("<td>"+salary+"</td>");
        $("table").append($tr);
    }
    
    /* --- 删除选中的员工 --- */
    function delEmp(){
        var $allChecked = $("input[type='checkbox']:checked");
        $allChecked.parent("td").parent("tr").remove();
                    //th所在行不会被删除
    }
    
    /* 点击全选设置 员工所在的行全选或者全不选 */
    function checkAll(){
        $("input[type='checkbox']").prop("checked", $("#all").prop("checked") );
        //获取第一个复选框的状态，把值赋给其他所有复选框
    }
    
    /* --- 修改指定id的员工 --- */
    function updEmp(){
        var id = $("#box2 input[name='id']").val().trim();
        var name = $("#box2 input[name='name']").val();
        var email = $("#box2 input[name='email']").val();
        var salary = $("#box2 input[name='salary']").val();
        if( id==""||name==""||email==""||salary==""){
            alert("员工信息不能为空！");
            return;
        }
        var isExist = false;
        $("table tr").each(function(index, element){
            var tempId = $(element).find("td").eq(1).html();
            if(id==tempId){
                $(this).find("td").eq(2).html(name);
                $(this).find("td").eq(3).html(email);
                $(this).find("td").eq(4).html(salary);
                isExist = true;
            }
        })
        if(isExist == false){
            alert("该ID信息不存在！");
            return;
        }
    }
</script>
</head>

<body>
<h2>添加新员工</h2>
<div id="box1">
    ID：<input type="text" name="id"/>
    姓名：<input type="text" name="name"/>
    邮箱：<input type="text" name="email"/>
    工资：<input type="text" name="salary"/>
    <input type="button" onclick="addEmp()" id="add" value="添加新员工"/>
</div>
<hr/>
<table border="1">
    <tr>
        <th>
            <!-- 全选复选框 -->
        <input type="checkbox" onclick="checkAll()" id="all"/>
        </th>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>工资</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>1</td>
        <td>宋江</td>
        <td>sj@163.com</td>
        <td>12000</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>2</td>
        <td>武松</td>
        <td>ws@163.com</td>
        <td>10500</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>3</td>
        <td>孙二娘</td>
        <td>sen@163.com</td>
        <td>11000</td>
    </tr>
</table>
<h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中员工</a></h2>
<hr/>

<div id="box2">
    ID：<input type="text" name="id"/>
    姓名：<input type="text" name="name"/>
    邮箱：<input type="text" name="email"/>
    工资：<input type="text" name="salary"/>
    <input type="button" onclick="updEmp()" id="upd" value="根据ID修改员工信息"/>
</div>
</body>
</html>