JavaScript实现动态添加员工信息

实现功能包括：

输入员工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); //一行信息加入tbodytbody.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>

JavaScript实现动态添加员工信息相关推荐

C# 动态添加SEO 信息，不和静态页面重复和叠加
动态添加SEO 信息,不和静态页面重复和叠加,就一个方法,用到了做个记录,以后直接用就OK了,需要的同学也可以直接拿去用. 1 /// <summary> 2 /// 动态设置 SEO 信 ...
java添加员工代码_1.7.5 添加员工信息实现过程（1）
1.7.5 添加员工信息实现过程(1) 当用户单击如图1.16所示的员工信息窗体的"添加"按钮后,将弹出添加员工信息窗体.添加员工信息由两部分组成,分别为添加员工基本信息与添加员 ...
JavaScript实现动态添加页面的表格行数并获取数据
JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了. <table cellpadding="0" ...
Krpano全景：在javascript中动态添加/删除/修改（位置）热点（向后端写入）
目录接下来看在JS中的方法: 1.手动添加热点(点击图上添加点) 2.查找热点 3.修改热点 4.删除热点其他方法作为管理员,在管理全景时会涉及到各个标签的操作,本篇文章介绍在JS中对热点的操作 ...
Krpano学习：在javascript中动态添加/删除/修改（位置）热点（向后端写入）
作为管理员,在管理全景时会涉及到各个标签的操作,本篇文章介绍在JS中对热点的操作,其数据可传到后端并写入数据库. 首先先给一个在xml文件中的动态热点添加的方法,下面的代码直接把两个url图片换了就可 ...
javascript中动态添加事件
直接写函数: <script language="javascript"> document.getElementById("result").οn ...
javascript中动态添加事件!!
直接写函数: <script language="javascript"> document.getElementById("result").on ...
JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
Javascript DOM动态添加表格
一次翻译技术文章,本身英语水平很烂,翻译的也是自己刚开始学习的技术,所以能勉强看懂英文的话都要尽量读原文而不要看我的翻译,免得被误导.阅读原文这篇文章简单介绍了DOM 1.0一些基本而强大的方法 ...

JavaScript实现动态添加员工信息

实现功能包括：

JavaScript实现动态添加员工信息相关推荐

最新文章

热门文章