JavaScript页面动态实现添加删除员工

最新推荐文章于 2023-04-18 15:57:12 发布
最新推荐文章于 2023-04-18 15:57:12 发布
阅读量884 收藏 5
点赞数 1
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bolovin4ever/article/details/104303860
版权

原生js实现页面添加删除员工的功能,最终效果如下:
在这里插入图片描述submit添加员工,delete删除,结果在页面动态显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="employer.css">


<body>
    <script src="employer.js"></script>
    <h1>添加新员工</h1>
    <div id='add'>
        <div class="row">
            <div class='desc'>name:</div>
            <div class="tag"><input type="text" id='name'></div>
        </div>
        <div class="row">
            <div class='desc'>email:</div>
            <div class="tag"> <input type="text" id="email"></div>
        </div>
        <div class="row">
            <div class='desc'>salary:</div>
            <div class="tag"><input type="text" id="salary"></div>
        </div>
        <div class="row">
            <div id='submit'><input type="button" value="submit" onclick="add()"></div>
        </div>
    </div>
    <table id="tab">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </table>
   
</body>

</html>

js这里可以用个循环让代码看起来简洁点儿

function add() {
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var salary = document.getElementById('salary').value;
    var obj = { 'name': name, 'email': email, 'salary': salary };
    var tab = document.getElementById('tab');
    var tr = document.createElement('tr');
    for (const k in obj) {
        if (obj.hasOwnProperty(k)) {
            const element = obj[k];
            var td = document.createElement('td');
            var tn = document.createTextNode(element);
            // 组装对象
            td.appendChild(tn);
            tr.appendChild(td);
            tab.appendChild(tr);
        }
    }
    var td = document.createElement('td');
    var btn = document.createElement('button');
    btn.setAttribute('onclick', 'deleteUser(this)');
    btn.innerHTML = 'Delete';
    // btn 样式
    btn.style.color = 'blue';
    btn.style.textDecoration = 'underline';
    // 组装对象
    tab.appendChild(tr);
    tr.appendChild(td);
    td.appendChild(btn);

}
function deleteUser(val) {
    var tr = val.parentNode.parentNode;
    var tab = tr.parentNode;
    tab.removeChild(tr);
}

css样式没什么好说的,随便写了点…

#add {
    width: 600px;
    height: 200px;
    margin: 0 auto;

}

h1 {
    text-align: center;
}

.desc {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 20px;
}

.tag {
    float: left;
    width: 200px;
}

.row {
    width: 300px;
    height: 50px;
    background: pink;
    margin: 0 auto;
}

table {
    margin: 0 auto;
    border: 1px solid;
}

#submit {
    float: right;
}
雨村欢
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript增删改查练习（将人员信息可以添加到表格中也可以进行删减）
Yueqin0512的博客
09-29 760
将人员信息可以添加到表格中也可以进行删减 html代码： <table style="margin:100px 100px 30px 100px" border="3" id="employeeTable"> <tr> <th style="text-align: center;">Name</th> <th style="text-align: center;">Email&
JavaScript Date删除添加员工信息练习
weixin_30856965的博客
08-01 250
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> tr{ ...
JS练习3——增加与删除员工
DanmoSAMA的博客~
12-23 376
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="s
【JavaScript---添加删除功能】
一位全栈的菜鸟
12-12 365
JavaScript代码—添加删除功能。
用javascript实现网页中表格的行的添加与删除
ssisse的博客
04-19 1528
制作一个表格，显示班级的学生信息。要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 new document window.onload = function(){
用JavaScript实现的员工组织结构图.zip
11-10
它提供了丰富的功能，能够实现动态内容、用户交互以及复杂的网页应用。在这个“用JavaScript实现的员工组织结构图”项目中，我们可以深入探讨JavaScript如何用于构建可视化数据结构，如组织结构图。 1. **数据结构...
12.JS动态添加员工作业.zip
01-29
"JS动态添加员工作业"这个主题可能涉及到如何利用JavaScript来动态地创建、修改和删除HTML元素，特别是针对一个员工列表的场景。在这个作业中，我们可能会学习到以下几个关键知识点： 1. **DOM操作**：Document ...
python 实现员工工资信息管理系统
07-27
系统可能使用了模板引擎（如Jinja2）将Python数据与HTML模板结合，实现动态页面生成。 5. **表单处理与验证**：在HTML中，用户输入数据通常通过表单提交。Python后端需要处理这些请求，验证输入数据的有效性，确保...
HTML+JavaScript实现工人信息管理
12-11
数组的创建、添加、删除和查找等操作都是JavaScript的基本语法。 2. **用户交互**：通过监听用户的点击事件，如按钮点击，JavaScript可以触发相应的功能，比如添加新的工人信息、编辑或删除已有信息。 3. **数据展示...
基于jQuery实现表格的查看修改删除
10-21
在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。...总的来说，jQuery提供了一个强大的工具集，使得动态交互的Web页面开发变得更加简单高效。
JS小功能(操作Table--动态添加删除表格及数据)实现代码
10-26
主要介绍了操作Table--动态添加删除表格及数据实现代码，有需要的朋友可以参考一下
js.属性_添加删除_资料
weixin_30785593的博客
02-01 71
1、主要是记录3个网页的内容： 　　1.1、delete - JavaScript _ MDN.html（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete）　　ZC：MDN ! ! 　　1.2、关于给javascript对象添加、删除、修改对象的属性 - goweb - 博客园....
js实现网址queryParams新增和删除
rui_code的博客
04-18 238
【代码】js实现网址queryParams新增和删除。
js简单实现添加、删除记录
dengfengling999的博客
01-21 1177
DOM增删改的方法： appendChild（） 把新的节点添加到指定的节点。 向一个父节点中添加一个新的子节点 用法 ：父节点.appendChild（子节点）； removeChild（） 删除子节点 语法：父节点.removChild（子节点） replaceChild（） 替换子节点 使用指定的子节点替换已有的节点 语法：父节点.replaceChilld（新节点，子节点） insertBefore（） 将指定的子节点前面插入新的子节点 在指定的子节点...
javascript实现分页及页面的增加删除修改操作
ABCJIECBA的专栏
03-22 1617
addUser.html                   window.onload = function() {  document.getElementById("addu1").style.display = "none"; } function addUser() {  var name = document.getElementById("name").v
动态添加和删除表格行！
ebonyzhang
11-14 674
这几天一直再做动态添加表格行，也查阅了许多资料，许多例子可以借鉴，但是还是觉得真正有用的是运用于项目中的。 以下是代码示例：       //添加新行     $(document).ready(function() {        //隐藏模板tr        //$(".tb tr").eq(0).hide();        //添加序号        //var tb_j
SpringBoot(24) —— 员工管理系统：增加员工实现
Jzandth的博客
10-01 853
目录1.新增按钮2.页面跳转3.部门显示4.新增员工实现5.日期格式设置 1.新增按钮 在这里我们需要修改一下上一篇博客中按钮的设置，新增按钮不应该加入到每一行的数据后面，它应该独立出来放在表格的上方，并且应该是一个超链接，以此跳转到新增页面，让我们在表单中填入对应的数据进行新增 但是前面的文字Section title没有什么用，我们就直接把超链接放在Section title的位置上<a th:href="@{#}" class="btn btn-success" style="margin
26、员工管理系统：增加员工实现
qq_23889885的博客
10-05 296
add.html 注：上面改为department.id 注end 效果： 注： 我们选择的时候提交是提交的value=${dept.getId()},就是提交的这个数字 注end 注意，这里是post方式 ...
SSM项目（一）Day05之批量单个删除员工
程序彤的博客
01-12 124
// 为删除按钮添加一个自定义的属性来表示当前删除的员工id deleBtn.attr("dele_id",item.empId); 全选和全不选 勾一个按钮全选所有 $("#check_all").click(function () { // attr获取原生的dom属性的值时会出现undefined情况，推荐使用prop获取dom值 // this就是check_all全选的这个多选框含义 $(".check_item").pro
添加用户界面：使用VS Code的Web开发扩展程序，例如“Live Server”，创建一个简单的HTML页面，使用JavaScript和SQL语言实现添加、删除、修改、查询员工信息的功能。能给我一个python代码实现方法吗
最新发布
05-27
当然可以，这里给您提供一种使用Python Flask框架和SQLAlchemy库实现员工管理系统的代码示例。 首先，需要安装Flask和SQLAlchemy库： ``` pip install flask sqlalchemy ``` 然后，创建一个名为“app.py”的文件，编写以下代码： ```python from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///employee.db' db = SQLAlchemy(app) class Employee(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(50), nullable=False) gender = db.Column(db.String(10), nullable=False) age = db.Column(db.Integer, nullable=False) position = db.Column(db.String(50), nullable=False) salary = db.Column(db.Float, nullable=False) def __repr__(self): return '<Employee %r>' % self.id @app.route('/') def index(): employees = Employee.query.all() return render_template('index.html', employees=employees) @app.route('/add', methods=['GET', 'POST']) def add_employee(): if request.method == 'POST': name = request.form['name'] gender = request.form['gender'] age = request.form['age'] position = request.form['position'] salary = request.form['salary'] employee = Employee(name=name, gender=gender, age=age, position=position, salary=salary) db.session.add(employee) db.session.commit() return redirect(url_for('index')) return render_template('add.html') @app.route('/edit/<int:id>', methods=['GET', 'POST']) def edit_employee(id): employee = Employee.query.get_or_404(id) if request.method == 'POST': employee.name = request.form['name'] employee.gender = request.form['gender'] employee.age = request.form['age'] employee.position = request.form['position'] employee.salary = request.form['salary'] db.session.commit() return redirect(url_for('index')) return render_template('edit.html', employee=employee) @app.route('/delete/<int:id>') def delete_employee(id): employee = Employee.query.get_or_404(id) db.session.delete(employee) db.session.commit() return redirect(url_for('index')) if __name__ == '__main__': app.run(debug=True) ``` 代码中定义了一个名为“Employee”的模型类，用于表示员工信息，并且使用SQLite作为数据库存储数据。同时，定义了四个路由函数，分别用于显示员工列表、添加员工、修改员工和删除员工。 最后，创建一个名为“templates”的文件夹，用于存放HTML模板文件。在“templates”文件夹中，创建以下三个HTML模板文件： 1. “index.html”文件，用于显示员工列表： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Employee Management System</title> </head> <body> <h1>Employee List</h1> <table border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Gender</th> <th>Age</th> <th>Position</th> <th>Salary</th> <th>Actions</th> </tr> </thead> <tbody> {% for employee in employees %} <tr> <td>{{ employee.id }}</td> <td>{{ employee.name }}</td> <td>{{ employee.gender }}</td> <td>{{ employee.age }}</td> <td>{{ employee.position }}</td> <td>{{ employee.salary }}</td> <td> <a href="{{ url_for('edit_employee', id=employee.id) }}">Edit</a> | <a href="{{ url_for('delete_employee', id=employee.id) }}" onclick="return confirm('Are you sure?')">Delete</a> </td> </tr> {% endfor %} </tbody> </table> <br> <a href="{{ url_for('add_employee') }}">Add Employee</a> </body> </html> ``` 2. “add.html”文件，用于添加新员工： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Add Employee</title> </head> <body> <h1>Add Employee</h1> <form method="POST" action="{{ url_for('add_employee') }}"> Name: <input type="text" name="name"><br> Gender: <input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female<br> Age: <input type="text" name="age"><br> Position: <input type="text" name="position"><br> Salary: <input type="text" name="salary"><br> <input type="submit" value="Add"> </form> <br> <a href="{{ url_for('index') }}">Back to Employee List</a> </body> </html> ``` 3. “edit.html”文件，用于修改员工信息： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Edit Employee</title> </head> <body> <h1>Edit Employee</h1> <form method="POST" action="{{ url_for('edit_employee', id=employee.id) }}"> Name: <input type="text" name="name" value="{{ employee.name }}"><br> Gender: <input type="radio" name="gender" value="male" {% if employee.gender == 'male' %}checked{% endif %}>Male <input type="radio" name="gender" value="female" {% if employee.gender == 'female' %}checked{% endif %}>Female<br> Age: <input type="text" name="age" value="{{ employee.age }}"><br> Position: <input type="text" name="position" value="{{ employee.position }}"><br> Salary: <input type="text" name="salary" value="{{ employee.salary }}"><br> <input type="submit" value="Save"> </form> <br> <a href="{{ url_for('index') }}">Back to Employee List</a> </body> </html> ``` 运行该程序后，在浏览器中访问http://127.0.0.1:5000，即可使用该员工管理系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值