员工管理

陈尚涵 · 发表于 2020-7-27 09:16:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

HTML, CSS, JS放到同一文件了

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>员工管理</title>

<style>

      * {

         padding: 5px;

         margin: 10px;

         font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

      }

      th {

         color:rgb(210, 52, 224);

      }

      td {

         color:rgb(26, 23, 219);

      }

      a {

         color:red;

      }

      body {

         background-color: aqua;

      }

      table {

         background-color:rgb(107, 212, 216);

         border-collapse: collapse;

         position: absolute;

         text-align: center;

         width: 50%;

         top: 32%;

         left: 50%;

         transform: translate(-50%, -50%);

      }

      table, th, td {

         border: 1px solid black;

         padding: 4px;

      }

      #addNewPerson {

         background-color: lightblue;

         position: absolute;

         top: 80%;

         left: 50%;

         transform: translate(-50%, -50%);

         border: 1px solid black;

         width: 20%;

         padding: 4px;

         text-align: center;

         border-radius: 14px;

      }

      input {

         border: 1px solid  black;

         border-radius: 10px;

         background-color: lightgreen;

      }

      input[type=button] {

         background-color: rgb(218, 199, 30);

      }

      input[type=button]:hover {

         background-color: rgb(30, 215, 40);

      }

</style>

</head>

<body>

<table id="peopleMessagesTable">

      <tr>

         <th>Name</th>

         <th>Email</th>

         <th>Salary</th>

         <th>Delete</th>

      </tr>

      <tr>

         <td>Person1</td>

         <td>111@136.com</td>

         <td>3000</td>

         <td>

            <a href="javascript:;">Delete</a>

         </td>

      </tr>

      <tr>

         <td>Person2</td>

         <td>222@136.com</td>

         <td>5000</td>

         <td>

            <a href="javascript:;">Delete</a>

         </td>

      </tr>

      <tr>

         <td>Person3</td>

         <td>333@136.com</td>

         <td>10000</td>

         <td>

            <a href="javascript:;">Delete</a>

         </td>

      </tr>

</table>

<div id="addNewPerson">

      <h1 style="color:rgb(69, 41, 226)">添加新员工</h1>

      <input type="text" placeholder="Name" id="name" />

      <br>

      <input type="text" placeholder="Email" id="email" />

      <br>

      <input type="text" placeholder="Salary" id="salary" />

      <br>

      <input type="button" value="添加" style="width: 80px;" id="addPersonButton">

</div>

<script src="jquery-1.7.2/jquery1.7.2.js"></script>

<script>

      $(function (){

         //设置当按下按钮的事件

         $('#addPersonButton').click(function (){

            //1.获取数据

            var $table = $('#peopleMessagesTable')

            var $name = $('#name');

            var $email = $('#email');

            var $salary = $('#salary');

            var name = $('#name').val();

            var email = $('#email').val();

            var salary = $('#salary').val();

            //2.做好准备工作，添加到table后面

            //tr实例

            /* <tr>

                  <td>Person1</td>

                  <td>111@136.com</td>

                  <td>3000</td>

                  <td>

                     <a href="javascript:;">Delete</a>

                  </td>

            </tr>*/

            var $ele = $('<tr></tr>');

                  $ele.append('<td>' + name + '</td>');

                  $ele.append('<td>' + email + '</td>');

                  $ele.append('<td>' + salary + '</td>');

                  $ele.append('<td><a href="javascript:;">Delete</a></td>');

            //插入

            $table.append($ele);

            $name.val('');

            $email.val('');

            $salary.val('');

            $ele.find('a').click(Delete);

         });

         $(document).find('a').click(Delete);

         function Delete (){

            var $obj = $(this).parent().parent();

            if(confirm('是否删除' + $obj.children(':first').html() + '?')){

                  $obj[0].remove();

            }



         }

      })

</script>

</body>

</html>
复制代码

账号		自动登录	找回密码
密码			立即注册

[作品展示] 员工管理

马上注册，结交更多好友，享用更多功能^_^