js简单动态添加员工

最新推荐文章于 2022-11-27 20:04:16 发布

不会秃头

最新推荐文章于 2022-11-27 20:04:16 发布

阅读量801

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_38499019/article/details/105451418

版权

页面
在这里插入图片描述
可以实现编号验证、添加员工、隔行变色、全选、单行删除和多行删除操作。

<!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 empId=document.getElementById("txtId").value;
    		// 员工姓名
    		var empName=document.getElementById("txtName").value;
    		// 员工职位
    		var empJob=document.getElementById("txtJob").value;
    		var emp=new Object();
    		emp.empId=empId;
    		emp.empName=empName;
    		emp.empJob=empJob;
    		empMessage(emp);
    	}
    	// 动态添加元素
    	function empMessage(emp){
    		// 添加一行信息
    		var td_select=document.createElement("td");
    		// 复选框
    		var checkbox=document.createElement("input");
    		checkbox.setAttribute("type","checkbox");
    		checkbox.setAttribute("name","select");
    		td_select.appendChild(checkbox);
    		
    		// 员工编号
    		var td_Id=document.createElement("td");
    		var txtId=document.createTextNode(emp.empId);
    		td_Id.appendChild(txtId);
    		
    		// 员工姓名
    		var td_Name=document.createElement("td");
    		var txtName=document.createTextNode(emp.empName);
    		td_Name.appendChild(txtName);
    		
    		// 员工职位
    		var td_Job=document.createElement("td");
    		var txtJob=document.createTextNode(emp.empJob);
    		td_Job.appendChild(txtJob);
    		
    		// 删除按钮
    		var td_Del=document.createElement("td");
    		var btnDel=document.createElement("input");
    		btnDel.setAttribute("type","button");
    		btnDel.setAttribute("value","删除");
    		btnDel.setAttribute("onclick","removeTr(this);");
    		td_Del.appendChild(btnDel);
    		
    		// 创建一行存储员工信息
    		var tr=document.createElement("tr");
    		var tbody=document.getElementById("tbContent");
    		// 将每一个td添加到tr中
    		tr.appendChild(td_select);
    		tr.appendChild(td_Id);
    		tr.appendChild(td_Name);
    		tr.appendChild(td_Job);
    		tr.appendChild(td_Del);
    		// 将一行信息添加到tbody中
    		tbody.appendChild(tr);
    		
    		// 实现隔行变色
    		var items=document.getElementsByTagName("tbody")[0].children;
    		for (var i = 0; i < items.length; i++) {
    			if(i%2==0){
    				items[i].style.backgroundColor="gray";
    			}else{
    				items[i].style.backgroundColor="lightyellow";
    			}
    		}
    	}
		// 删除某一行信息
		function removeTr(obj){
			// 获取删除所在的行
			var trNode=obj.parentNode.parentNode;//tr
			var tbody=document.getElementById("tbody");
			var txtName=trNode.getElementsByTagName("td")[2].firstChild.nodeValue;
			if(confirm("确定要删除"+txtName+"的信息吗?")){
				// 删除某一行
				//tbody.removeChild(trNode);
				trNode.parentNode.removeChild(trNode);
			}
		}
		
		// 实现全选
		function selectAll(){
			var all=document.getElementById("all");
			var items=document.getElementsByName("select");
			for (var i = 0; i < items.length; i++) {
				items[i].checked=all.checked;
			}
		}
		
		// 删除员工信息
		function deleteEmp(){
			var checkbox = document.getElementsByName("select");
			var count=0;// 存放被选中的数量
			var arr = new Array();//存放被选中的行
			
			for (var i = 0; i < checkbox.length; i++) {
				// 判断被选中的项
				if(checkbox[i].checked){
					count++;
					var element=checkbox[i].parentNode.parentNode;//tr
					// 将被选中的行信息添加到数组中
					arr.push(element);
				}
			}
			
			if(count==0){
				alert("请至少选中一项！！");
			}else{
				if(confirm("确定要删除吗?")){
					var tbody=document.getElementById("tbContent");
					// 执行删除操作
					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>

不会秃头

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js简单动态添加员工

页面可以实现编号验证、添加员工、隔行变色、全选、单行删除和多行删除操作。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> ...
复制链接

扫一扫