实现动态添加员工案例

最新推荐文章于 2024-10-16 16:26:58 发布

fengjiao__66666

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量96

点赞数

分类专栏： JavaScript作业文章标签： javascript

本文链接：https://blog.csdn.net/fengjiao__66666/article/details/124747084

版权

该博客提供了一个使用HTML、CSS和JavaScript实现的简单学员信息录入和显示的示例。用户可以输入新学员的姓名、年龄、性别、薪资和就业城市，点击录入按钮后，信息会立即在表格中显示。同时，提供了删除功能，允许用户通过点击表格中的删除链接移除已录入的学员信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color:#721c24;
}
h1 {
  text-align: center;
  color:#333;
  margin: 20px 0;
 
}
table {
  margin:0 auto;
  width: 800px;
  border-collapse: collapse;
  color:#004085;
}
th {
  padding: 10px;
  background: #cfe5ff;
  
  font-size: 20px;
  font-weight: 400;
}
td,th {
  border:1px solid #b8daff;
}
td {
  padding:10px;
  color:#666;
  text-align: center;
  font-size: 16px;
}
tbody tr {
  background: #fff;
}
tbody tr:hover {
  background: #e1ecf8;
}
.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}
.info  input {
  width: 80px;
  height: 25px;
  outline: none;
  border-radius: 5px;
  border:1px solid #b8daff;
  padding-left: 5px;
}
.info button {
  width: 60px;
  height: 25px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.info .age {
  width: 50px;
}
    </styl