精华内容
下载资源
问答
  • JavaScript实现动态添加员工信息

    千次阅读 2020-04-08 10:13:06
    动态添加员工信息实现功能包括: - 输入员工id,姓名,选择职位,对信息进行表单验证 - 表格实现隔行变色添加 - 点击提交按钮后,弹框提示是否添加 - 实现全选全不选 - 单行删除 - 多行同时删除
    实现功能包括:
    • 输入员工id,姓名,选择职位,对信息进行表单验证
    • 表格实现隔行变色添加
    • 点击提交按钮后,弹框提示是否添加
    • 实现全选全不选
    • 单行删除
    • 多行同时删除

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        	 #empAdd {
                width: 600px;
                margin: 10px auto;
                padding: 10px 0px;
                text-align: center;
            }
    
                #empAdd fieldset {
                    height: 100px;
                }
    
            .btn {
                margin-top: 5px;
                width: 60px;
            }
            .container {
                margin: 20px auto;
                width: 500px;
                text-align: center;
            }
    
            table {
                width: 500px;
            }
    
            table, th, td {
                border: 1px solid #000000;
                border-collapse: collapse;
            }
            
        </style>
        <script>
        	function empAdd(){
        		var empNo = document.getElementById("txtId").value;
        		var empName = document.getElementById("txtName").value;
        		var b = Check(empNo,empName);
        		var empJob = document.getElementById("txtJob").value;
            	//var empJob = job.options[job.selectedIndex].innerText;
        		var emp = new Object();
        		emp.empNo = empNo;
        		emp.empName = empName;
        		emp.empJob = empJob;
        		if(b){
    	    		if (window.confirm("编号:"+empNo+" 姓名:"+empName+" 职位:"+empJob+",确定添加吗?")) {
    	    			empMessage(emp);
    	    		}
        		}
        	}
        	
        	//判断数据是否符合规范
        	function Check(empNo,empName){
        		var reg =/^\d{1,}$/;
            	if (!reg.test(empNo)) {
        			alert("编号格式错误,请重新输入!");
        			return false;
        		}else if(empName == null||empName == ""){
            		alert("姓名不能为空!");
            		return false
            	}else{
            		return true;
            	}
        	}
        	
        	//动态添加元素
        	function empMessage(emp){
    			var c1 = document.createElement("td");
    			// 复选框
    			var box = document.createElement("input");
    			box.setAttribute("type","checkbox");
    			box.setAttribute("name","items");
    			c1.appendChild(box);
    			
    			//员工编号
    			var c2 = document.createElement("td");
    			var v2 = document.createTextNode(emp.empNo);
    			c2.appendChild(v2);
    			
    			//员工姓名
    			var c3 = document.createElement("td");
    			var v3 = document.createTextNode(emp.empName);
    			c3.appendChild(v3);
    			
    			//员工职位
    			var c4 = document.createElement("td");
    			var v4 = document.createTextNode(emp.empJob);
    			c4.appendChild(v4);
    			
    			//删除按钮
    			var c5 = document.createElement("td");
    		    var btnDel = document.createElement("input"); 
    		    btnDel.setAttribute("type","button"); 
    		    btnDel.setAttribute("value","删除");  
    		    btnDel.onclick=function(){ 
    		    	//this指向删除按钮  btnDel - td - tr  
    		    	var trNode = this.parentNode.parentNode;
    		    	var txtName = trNode.getElementsByTagName("td")[2].firstChild.nodeValue;
    		        if(confirm("确定删除员工"+txtName+"的信息吗?")){
    			       	//tr - tbody - 删除(tr) 
    			       	trNode.parentNode.removeChild(trNode); 
    		       	} 
    		     } 
    		    c5.appendChild(btnDel); 
    		    
    		    var tbody = document.getElementById("tbContent");
    		    var row = document.createElement("tr");
    		    //每列信息添加进行中
    			row.appendChild(c1);
    			row.appendChild(c2); 
    			row.appendChild(c3); 
    			row.appendChild(c4); 
    			row.appendChild(c5); 
    			//一行信息加入tbody
    			tbody.appendChild(row);
    			
    			//var trs = tbody.getElementsByTagName("tr");
    			var trs = document.getElementsByTagName("tbody")[0].children;
    			for (var i = 0; i < trs.length; i++) {
    				 if (i % 2 == 0) { //偶数行
    				   trs[i].style.backgroundColor = "yellowgreen";
    				 }
    				 else {
    				   trs[i].style.backgroundColor = "green";
    				 }
    			 }
        	}
        	
        	//实现全选
        	function selectAll(){
        		var all = document.getElementById("all");
        		var items = document.getElementsByName("items");
        		for(var i=0;i<items.length;i++){
        			//与全选框动作同步
          			items[i].checked= all.checked;
          		}
        	}
        	
        	//删除员工信息
        	function deleteEmp(){
        		var tbody = document.getElementById("tbContent");
        		var items = document.getElementsByName("items");
        		var count = 0;
        		var arr = new Array();
        		for(var i=0;i<items.length;i++){
          			if (items[i].checked == true) {
          				count++;
          				//将被选中的行添加到数组中
          				arr.push(items[i].parentNode.parentNode);
          			} 
          		}
      			if(count == 0){
      				alert("请至少选择一项");
      			}else{
      				if(confirm("确定要删除吗?")){
      					for(index in arr){
      						tbody.removeChild(arr[index]);
      					}
      				}
          		}
        	}
        	
        </script>
    </head>
    <body>
    	
    	<div id="empAdd">
            <fieldset>
                <legend><strong>添加员工</strong></legend>
    
                <label>编号:</label>
                <input type="text" size="15" id="txtId" name="empNo" value="" maxlength="4"
                	autofocus="autofocus" placeholder="请输入员工编号"/>
                <label>姓名:</label>
                <input type="text" size="15" id="txtName" name="empName" value="" 
                	maxlength="20"   placeholder="请输入姓名"/>
                <label>职位:</label>
                <select id="txtJob">
                	<option value="0" selected="selected">请选择</option>
                    <option value="程序员">程序员</option>
                    <option value="设计师">设计师</option>
                    <option value="项目经理">项目经理</option>
                </select>	
                <br /><br />
                <div>
                   <input type="submit" name="name" id="btnAdd" value="添加" onclick="empAdd();" />
                   <input type="reset" class="btn" id="btnReset" value="重置" />
                </div>
            </fieldset>
        </div>
        <div class="container">
            <h1>员工管理</h1>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" name="selectAll" onchange="selectAll();" id="all" />全选</th>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>职位</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbContent"></tbody>
            </table>
            <p id="empty">
            </p>
            <input type="button" name="name" id="btnDelete" onclick="deleteEmp();" value="删除员工" />
            <script>
    
            </script>
        </div>
    </body>
    </html>
    
    
    展开全文
  • 这个工作表记录了一个员工信息档案,查询表可以从数据源查询出指定员工信息,用定义名称图片,动态查找员工图片及信息等,谢谢大家的支持
  • 员工目录是一个 Fullstack React.js 应用程序,它允许用户使用过滤器动态过滤员工。 开发工具 Javascript CSS 引导程序 React.js 使用信息 此应用程序应该易于使用且直观。 打开下面的 URL 并在打开时单击访问员工...
  • 在页面上绘制一张表格,动态地向表格中添加公司员工的基本信息,测试数据不少于3 条,员工信息包括姓名、年龄、性别和部门 实现思路: 在页面中绘制表格,表头显示员工的基本信息,分别为姓名、年龄、性别和部门...

    查看本章节

    查看作业目录


    需求说明:

    在页面上绘制一张表格,动态地向表格中添加公司员工的基本信息,测试数据不少于3 条,员工信息包括姓名、年龄、性别和部门

    实现思路:

    1. 在页面中绘制表格,表头显示员工的基本信息,分别为姓名、年龄、性别和部门
    2. 在JavaScript 脚本中创建一个员工类,员工类中包含员工的属性:姓名、年龄、性别和部门
    3. 构建3 个不同的员工对象,并将它们添加到数组中
    4. 页面加载后,使用for…in 语句和with 语句遍历数组中员工对象,动态地将它们添加到表格中

    实现代码:

    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<table border="1" id="tab">
    			<tr>
    				<th>姓名</th>
    				<th>年龄</th>
    				<th>性别</th>
    				<th>部门</th>
    			
    			</tr>
    		</table>
    		<script type="text/javascript">
    			function Employee(name,age,gender,department){
    				this.name=name;
    				this.age=age;
    				this.gender=gender;
    				this.department=department;
    			}
    			var p1=new Employee("张三","25","男","人事部");
    			var p2=new Employee("李四","23","女","财务部");
    			var p3=new Employee("王五","24","女","研发部");
    			var arr=new Array(p1,p2,p3);
    			function init(){
    				var table=document.getElementById("tab");
    				for (var index in arr) {
    					var tr=document.createElement("tr");
    				    for (var prop in arr[index]) {
    				    	var td=document.createElement("td");
    				    	with (arr[index]){
    				    		if (prop=="name") {
    				    			td.innerHTML=name;
    				    		}
    				    		if (prop=="age") {
    				    			td.innerHTML=age;
    				    		}
    				    		if (prop=="gender") {
    				    			td.innerHTML=gender;
    				    		}
    				    		if (prop=="department") {
    				    			td.innerHTML=department;
    				    		}
    				    	}
    				    	tr.appendChild(td);
    				    }
    				    table.appendChild(tr);
    				}
    			}
    			window.onload=function(){
    				init();
    			}
    		</script>		
    	</body>
    </html>
    

     

    展开全文
  • 使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接 JavaScript/JQuery完成对表格的增删改查和动态拼接使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接1、语言环境和需求2、...

    使用JavaScript/JQuery脚本完成对员工信息的增删改查和表格的动态拼接

    1、语言环境和需求

    开发环境:Visual Studio Code /Visual Studio2019
    需求说明:现有员工信息表,添加JavaScript/JQuery脚本完成员工信息的增删改查。页面如下图
    在这里插入图片描述

    2、编写表结构,编写表结构,引入jquery和javascript文件

    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8" />
    	<title></title>
    	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/new_file.js" type="text/javascript"></script>
    	</head>
    	<body>
    		<a href="#">增加</a>&nbsp;&nbsp;
    		<input type="text"/><a href="#">查询</a>
    		</p>
    		<table border="1" id="table">
                <tr>
                	<th>ID</th>
                	<th>姓名</th>
                	<th>薪水</th>
                	<th>功能</th>
                </tr>
                <tr>
                	<td>1</td>
                	<td>张三</td>
                	<td>8000</td>
                	<td>
                		<a href="#" class="bc" style="display: none;">保存</a>
                		<a href="#" class="xg">修改</a>&nbsp;
                		<a href="#" class="sc">删除</a>
                	</td>
                </tr>
                <tr>
                	<td>2</td>
                	<td>李四</td>
                	<td>9000</td>
                	<td>
                		<a href="#" class="bc" style="display: none;">保存</a>
                		<a href="#" class="xg">修改</a>&nbsp;
                		<a href="#" class="sc">删除</a>
                	</td>
                	
                </tr>
    	</table>
    </body>
    </html>
    
    

    3、实现“增加”功能,复制表格第一行数据,添加到表格最后一行

    在这里插入图片描述

    $(function(){
    		//增加
    		$("a:contains('增加')").click(function(){
    			var first=$("#table tr:eq(1)");
    			var news=first.clone(true);
    			news.appendTo(first.parent());
    		});
    });
    

    4、实现“删除”功能,删除员工

    $(function(){
    	//删除
    	$("a.sc").click(function(){
    		$(this).parent().parent().remove(); 
    	});
    });
    

    5、实现“查询”功能,查询员工ID,显示满足条件的员工信息

    在这里插入图片描述

    $(function(){
    	//查询
     		$("a:contains('查询')").click(function(){
     			var keys=$("input").val();
     			var trr=$("table tr:gt(0)");
     			if(keys!=""){
     				for(var i=0;i<trr.length;i++){
     					var id=trr.eq(i).find("td:first").html();
     					if(id==keys){
     						trr.eq(i).show();
     					}
     					else{
     						trr.eq(i).hide();
     					}
     				}
     			}
     			else{
     				for(var i=0;i<trr.length;i++){
     					trr.eq(i).show();
     				}
     			}
     		})
    });
    

    6、实现“修改”功能,根据员工ID,点击保存修改员工姓名和薪水。

    在这里插入图片描述

    $(function(){
    		//查询
       		$("a:contains('查询')").click(function(){
       			var keys=$("input").val();
       			var trr=$("table tr:gt(0)");
       			if(keys!=""){
       				for(var i=0;i<trr.length;i++){
       					var id=trr.eq(i).find("td:first").html();
       					if(id==keys){
       						trr.eq(i).show();
       					}
       					else{
       						trr.eq(i).hide();
       					}
       				}
       			}
       			else{
       				for(var i=0;i<trr.length;i++){
       					trr.eq(i).show();
       				}
       			}
       		})
    	
    	//修改
    	$(".xg").click(function(){
    		var tds=$(this).parent().parent().children();
    		for(var i=0;i<tds.length;i++)
    		{
    			var td=tds.eq(i);
    			if (td.children().length<=0) {
    				var html="<input type='text' value='"+td.text()+"'/>";
    				td.html(html);
    				}
    				
    			}
    			$(".bc").show();
    			$(".xg").hide();
    		});
    		
    		//保存
    		$(".bc").click(function(){
    			var tr=$(this).parent().parent();
    			var inputs=tr.find("input[type='text']");
    			for (var i=0;i<inputs.length;i++) {
    				var input=inputs.eq(i);
    				input.parent().text(input.val());
    				input.remove();
    				
    			}
    			$(".bc").hide();
    			$(".xg").show();
    	
    		});
    });
    

    到此就结束啦,快去练习一下吧!欢迎大佬和小Monkey沟通。
    在这里插入图片描述

    感谢大佬指正 小Monkey
    如果你觉得有用的话,就留个赞吧!蟹蟹

    展开全文
  • 简单的java公司员工部分信息录入,职工信息,家庭信息,外语能力。使用mysql数据库
  • create or replace procedure dyn_sql_test(p_col varchar2, p_value varchar2) as  v_sal employees.salary%type;  v_str varchar2(100); begin  v_str := 'select salary from employees where ' || p_col
    create or replace procedure dyn_sql_test(p_col varchar2, p_value varchar2) as
    
      v_sal employees.salary%type;
      v_str varchar2(100);
    begin
      v_str := 'select salary from employees where ' || p_col || ':= p_value';
      execute immediate v_str
        into v_sal
        using p _value;
      dbms_output.put_line(v_sal);
    end dyn_sql_test;
    展开全文
  • 您的任务是构建一个Node.js命令行应用程序,该应用程序接收有关软件工程团队中员工信息,然后生成一个HTML网页,以显示每个人的摘要。 测试是使代码可维护的关键,因此您还将为代码的每个部分编写一个单元测试,并...
  • 根据实际需求,“企业员工信息管理系统”项目采用模块化的设计思想,在WindowsXP操作系统环境下,搭建JSP运行环境JDK+TOMCAT,通过使用JAVA脚本语言完成动态的、交互的web服务器应用程序,实现员工个人信息查询、...
  • 链表存储员工信息

    千次阅读 2017-07-11 11:14:19
    1、场景: HR需要做⼀个员工管理,每当新员工入职,他需要新建该员工的资料,将其添加到员工管理数据库中,随后老板向HR了解该员工详细信息时, HR要能从系统中调出资料供老板查阅。此外,如果有员工离职, HR为其...
  • 员工管理系统 解析MySQL数据库以动态显示,更改和呈现员工数据的node.js应用程序。 视频演示: : 自述文件演示: 应用说明: 这是一个node.js应用程序,允许用户更改和编辑员工信息,而无需知道MySQL命令。 方法:...
  • 根据实际需求,“企业员工信息管理系统”项目采用模块化的设计思想,在WindowsXP操作系统环境下,搭建JSP运行环境JDK+TOMCAT,通过使用JAVA脚本语言完成动态的、交互的web服务器应用程序,实现员工个人信息查询、...
  • 员工信息管理系统

    千次阅读 2018-04-23 10:04:36
    SSM-CRUD 这个系统用的是spring、...主要的功能就是对员工信息进行添加,修改,分页查询和单个及批量删除 由于查询的时候带上了分页功能,这里就主要说一下查询吧。 第一:查询 • 1、项目在运行时,index页面...
  • 现在有四名员工的各季度销售数据,现在想在Excel中动态展示。 第一步:任意选择一个单元格,再点击数据—数据验证会出现如下选择框。 第二步:在上述选择框的来源处,选中姓名(四个员工名字)那一列,则会...
  • NULL 博文链接:https://yzz9i.iteye.com/blog/857076
  • 本课程是一个综合性案例,融合大量函数综合应用,数组函数综合应用,透视表,动态图表,宏,VBA显示员工照片,Microsoft Query,综合应用开发的一个系统课程,学习后会对整个系统开发有一个全新认识。 本课程配套...
  • 这个系统是用VB做的,有个登陆界面,可以查看员工基本信息,还有员工得工资管理模块。
  • 员工管理系统

    千次阅读 2018-07-15 14:58:31
    做了一个小型的员工管理系统,实现添加员工、查询所有员工、调整员工的月薪、根据员工的工号显示员工的的信息、删除指定工号的员工、统计一个月发放的总工资等操作。
  • 一、新员工入职信息安全须知 新员工入职后,在信息安全方面有哪些注意事项? 接受“信息安全与保密意识”培训; 每年应至少参加一次信息安全网上考试; 办理员工卡; 签署劳动合同(含保密职责); 根据部门和...
  • 这是一套蓝色扁平化新员工入职培训PPT模板,共31页; PPT模板采用了扁平化风格设计制作。PPT模板封面以为职场人物手举小旗行走在上升箭头之上。右侧填写入职培训PPT标题。界面风格简洁商务。 PowerPoint模板内容页,...
  • 首先是权限管理方面,一般的企业员工管理系统仅仅通过角色来设计用户权限,同一角色的权限信息必须一致,而想设计不同的权限就必须添加不同的角色,本文设计时使用动态权限分配技术来实现基于用户的权限分配;...
  • 高德地图实现多点标注marker和动态信息窗体

    万次阅读 热门讨论 2017-08-05 09:04:56
    当然从高德地图api也能查看到这一块,比如多点标注,简单信息窗体,这些都有api,可以先看官网的,然后,再看我这篇文章,怎么融合一起,记住数据全部来自后台数据库,这样才能保证一切数据都是动态的,可实时更新的...
  • SpringMVC实现员工信息的增删改查

    千次阅读 2017-08-24 08:04:41
    springmvc实现人员信息的增删改查
  • Django Vue实现动态菜单、动态权限

    千次阅读 2019-07-27 22:30:42
    随着前后端分离架构的流行,在 web 应用中,RESTful API 几乎已经成为了开发者主要选择,它使得客户端和服务端不需要保存对方的详细信息,也就是无状态性,但是这样在项目中需要动态菜单和动态权限就困难起来,本场...
  • JavaScript实现联想校招员工信息展示

    千次阅读 2014-09-12 19:12:42
    从 联想校招扣出来的,我们就用JavaScript来实现吧,给的有HTML还有CSS3,我打算先用前端模板技术讲信息都出来,之前数据是写死在HTML 数据封装在data.js里
  • 员工考勤管理系统

    千次阅读 2021-05-11 21:39:46
    考情信息管理系统是通过用户的需求描述而制定的员工信息考情管理系统,主要的功能有公司人员进行每天打卡签到、签退、请假申请、出差申请等。管理员对员工和部门进行管理(对员工增删改查、对部门的增删改查)、设定...
  • 首先定义一个学生结构体,再直接定义一个全局指针变量stu,让下面的函数都可以访问到这个动态内存 学生类结构体的信息大家可以自己添加。 struct Student{ int no; //学号 char name[4...
  • 按照上级的统一部署,认真贯彻落实“两会”期间的各项防护措施,密切注视社会治安动态,强化信息收集,确保“两会”期间辖区社会治安稳定。 二、深入开展严打整治斗争,维护社会治安稳定。 1、按照上级部署,能够...
  • 考勤管理系统是为了满足单位日常考勤管理的需求,使单位考勤过程更加快速、安全、高效的信息管理系统。本系统基于C/S模式,采用Visual Basic语言与Access数据库开发完成,实现了系统管理、数据管理与报表管理等功能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,639
精华内容 22,655
关键字:

属于动态信息的员工是