js练习

最新推荐文章于 2021-06-07 10:47:41 发布
最新推荐文章于 2021-06-07 10:47:41 发布
阅读量238 收藏
点赞数
分类专栏： js练习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42665745/article/details/109116793
版权
这段代码展示了使用原生JavaScript实现的人员管理功能，包括追加、修改、删除和查询操作。用户可以输入员工信息，系统会根据输入更新表格，并提供修改和删除现有记录的选项。此外，还实现了查询功能，允许用户通过输入编号查找员工。
摘要由CSDN通过智能技术生成 
<head>
	<meta charset="utf-8" />
	<title>人员管理</title>
	<script type="text/javascript">
		//追加栏
		function additional() {
			x = document.getElementById("form");
			x.style.display = "";
		}
		// 追加确认
		function submits() {
			//标志位
			var isflag = false
			var formsex;
			var formid = document.getElementById("formid");
			var formname = document.getElementById("formname");
			var formsexs = document.getElementsByName("sex");
			var formdesprition = document.getElementById("formdesprition");
			// console.log(formsexs[0].value)
			for(var i = 0; i < formsexs.length; i++) {
				if(formsexs[i].checked) {
					formsex = formsexs[i];
				}
			}
			var formIdValue = formid.value;
			var allTr = document.getElementsByClassName('name');
			allTr = [...allTr];
			// console.log(allTr)
			allTr.forEach((item, index) => {
				item.parentNode.style.backgroundColor = "";
				//修改
				//编号相同直接修改,不追加
				if(formIdValue == item.innerHTML&&formsexs[0].checked!==formsexs[1].checked) {
					item.parentNode.style.backgroundColor = "red";
					item.parentNode.children[1].innerHTML = formname.value;
					item.parentNode.children[3].innerHTML = formdesprition.value;
					console.log(formsex)
					if(item.parentNode.children[2].innerHTML == "男") {
						item.parentNode.children[2].innerHTML = formsex.value;
					} else {
						item.parentNode.children[2].innerHTML = formsex.value;
					}
					isflag = true;
					//清空input内数据
					formid.value = "";
					formname.value = "";
					formsexs[0].checked = false;
					formsexs[1].checked = false;
					formdesprition.value = "";
					//隐藏编辑框
					x = document.getElementById("form");
					x.style.display = "none";
				}
			})
			//清空颜色
			allTr.forEach((item, index) => {
				item.parentNode.style.backgroundColor = "";
			})
			if(isflag) {
				return
			}
			//如果性别为空，不添加
			if(formsexs[0].checked==formsexs[1].checked){
				return
			}
			//追加
			var tr = document.createElement("tr");
			tr.innerHTML = "<td class='name'>" + formid.value + "</td>" +
				"<td>" + formname.value + "</td>" +
				"<td>" + formsex.value + "</td>" +
				"<td>" + formdesprition.value + "</td>" +
				"<td><a href='javaScript:;' class='mod'>修改</a><a href='javaScript:;' class='del' style='margin-left: 9px;'>删除</a></td>";
			//给添加的按钮绑定修改事件
			var a = tr.getElementsByClassName("mod")[0];
			a.onclick = function() {
				//清空所以背景色
				var trs = document.getElementsByTagName("tr") ;
    			for(var i=0;i<trs.length;i++){
       				trs[i].style.backgroundColor="";
   				}
				var tr = this.parentNode.parentNode;
				var tid = this.parentNode.parentNode.firstElementChild;
				var tname = this.parentNode.previousElementSibling.previousElementSibling.previousElementSibling;
				var tsex = this.parentNode.previousElementSibling.previousElementSibling;
				var tdesprition = this.parentNode.previousElementSibling;
				tr.style.backgroundColor = 'red'
				var formid = document.getElementById("formid");
				var formname = document.getElementById("formname");
				var formsexs = document.getElementsByName("sex");
				var formdesprition = document.getElementById("formdesprition");
				formid.value = tid.innerHTML;
				//formid.readOnly = true;
				formname.value = tname.innerHTML;
				formdesprition.value = tdesprition.innerHTML;
				if(tsex.innerHTML == "男") {
					formsexs[0].checked = true;
				} else {
					formsexs[1].checked = true;
				}
				x = document.getElementById("form");
				x.style.display = "";
			}
			// 给添加的按钮绑定删除事件
			var b = tr.getElementsByClassName("del")[0];
			b.onclick = function() {
				var tr = this.parentNode.parentNode;
				tr.parentNode.removeChild(tr);
			}
			var t = document.getElementById("table")
			var tbody = t.getElementsByTagName("tbody")[0];
			tbody.appendChild(tr);
			//清空input内数据
			formid.value = "";
			formname.value = "";
			formsexs[0].checked = false;
			formsexs[1].checked = false;
			formdesprition.value = "";
			//隐藏编辑框
			x = document.getElementById("form");
			x.style.display = "none";
		}
		
		//修改
		function modify() {
			//清空所以背景色
			var trs = document.getElementsByTagName("tr") ;
    		for(var i=0;i<trs.length;i++){
       			 trs[i].style.backgroundColor="";
   			}
			var btn = document.getElementById("modBtn");
			var tr = btn.parentNode.parentNode;
			tr.style.backgroundColor = "red";

			var tid = btn.parentNode.parentNode.firstElementChild;
			var tname = btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling;
			var tsex = btn.parentNode.previousElementSibling.previousElementSibling;
			var tdesprition = btn.parentNode.previousElementSibling;
			var formid = document.getElementById("formid");
			var formname = document.getElementById("formname");
			var formsexs = document.getElementsByName("sex");
			var formdesprition = document.getElementById("formdesprition");
			formid.value = tid.innerHTML;
			formname.value = tname.innerHTML;
			formdesprition.value = tdesprition.innerHTML;
			if(tsex.innerHTML == "男") {
				formsexs[0].checked = true;
			} else {
				formsexs[1].checked = true;
			}
			var x = document.getElementById("form");
			x.style.display = "";
		}
		
		//删除
		function deletes() {
			var delBtn = document.getElementById("delBtn");
			var tr = delBtn.parentNode.parentNode;
			tr.parentNode.removeChild(tr);
		}
		
		//查询
		function query() {
			var allTr = document.getElementsByClassName('name');
			var queyInputValue = document.getElementById("query").value;
			allTr = [...allTr];
			var flag = true;
			// 遍历匹配项
			allTr.forEach((item, index) => {
				item.parentNode.style.backgroundColor = "";
				if(queyInputValue == item.innerHTML) {
					item.parentNode.style.backgroundColor = 'red';
					flag = false;
				}
			});
			if(flag) {
				alert("找不到信息");
			}
		}
	</script>
</head>
<style type="text/css">
	#input_div {
		width: 500px;
		height: 300px;
		border: solid;
		border-width: thin;
	}
	
	#input_id,
	#input_name {
		margin-top: 30px;
		margin-left: 45px;
		float: left;
	}
	
	#input_sex {
		margin-top: 80px;
		margin-left: 45px;
		clear: both;
	}
	
	#input_desprition {
		margin-top: 30px;
		margin-left: 45px;
	}
	
	textarea {
		vertical-align: top;
	}
	
	#submit {
		width: 70px;
		height: 30px;
		border-radius: 5px;
		background-color: chartreuse;
		margin-top: 30px;
		float: right;
		margin-right: 20px;
	}
	
	#id_select_input {
		margin-top: 20px;
		margin-left: 5px;
	}
	
	#id_select_input button {
		width: 65px;
		height: 25px;
		border-radius: 5px;
		background-color: #7FFF00;
	}
	
	.table {
		border-collapse: 0;
		border-spacing: 0;
		margin-top: 20px;
	}
	
	.table td {
		text-align: center;
		width: 100px;
	}
	
	.table tr {
		height: 30px;
	}	
</style>

<body>
	<h3>人员管理</h3>

	<form action="index.html" method="post" id="form" style="display: none;">
		<div id="input_div">
			<div id="input_id">
				编号&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" id="formid" />
			</div>
			<div id="input_name">
				姓名&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" id="formname" />
			</div>
			<div id="input_sex">
				性别&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男" />男&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="女" />女
			</div>
			<div id="input_desprition">
				描述&nbsp;&nbsp;&nbsp;&nbsp;<textarea rows="5" cols="42" id="formdesprition"></textarea>
			</div>
			<div id="input_button">
				<input type="button" name="submit" id="submit" value="提交" onclick="submits()" />
			</div>
		</div>
	</form>
	<div id="id_select_input">
		编号&nbsp;&nbsp;<input type="text" size="6" id="query" />&nbsp;&nbsp;<button id="query" onclick="query()">查询</button>&nbsp;&nbsp;<button onclick="additional()">追加</button>
	</div>
	<table border="1" class="table" id="table">
		<tr>
			<td>员工编号</td>
			<td>员工姓名</td>
			<td>性别</td>
			<td>描述</td>
			<td>操作</td>
		</tr>
		<tr>
			<td class="name">YD201201</td>
			<td>远东01</td>
			<td>男</td>
			<td>good</td>
			<td><a href="javaScript:;" class="mod" onclick="modify()" id="modBtn">修改</a>
				<a href="javaScript:;" onclick="deletes()" id="delBtn" >删除</a>
		</tr>
	</table>

</body>

在这里插入图片描述js练习，原生js写的。

Filwaod
关注
专栏目录
JS练习题
Rumosss的博客
03-06 743
【代码】JS练习题（PS：题目条件在，解法方法在）
**JS练习**
ting的博客
03-03 719
1.实现点击按钮，多个元素变窄变色变高，再次点击恢复原样式，可以在不刷新页面的情况下一直实现此功能，且有变化的过渡效果（不是直接变化） **思路：**按钮点击触碰函数，判断调用函数的次数，奇数恢复样式，偶数变化样式。并且有时延。 具体实现 先写好变化前的基本样式 HTML： /* 使用 通配符 取消元素默认值 */ *{ margin: 0; padding: 0; } ...
js编程练习
Lucky Star的博客
01-17 3258
1.题目：某班的成绩出来了，现在老师要把班级的成绩打印出来。 效果如下：xxx年xx月x日  星期x--班级总分为：81 格式要求：1.显示打印的日期。格式为类似“xxxx年xx月xx日 星期x”的当前的时间。 2.计算出该班级的平均分（保留整数）。 同学成绩数据如下： "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76
js基础练习（四）
flqbestboy的专栏
08-10 6701
练习： 通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角。试编程。 1   2   3   4   5 6   7   8   9   10 11 12 13 14  15 16 17 18 19  20 21 22 23 24  25 var arr=[]; for(var i=0;i<5;i++){
atguigu-js:尚硅谷 JavaScript练习
05-26
"atguigu-js:尚硅谷 JavaScript练习"这个项目显然是一份用于学习和提升JavaScript技能的资源，可能包含了各种练习题和示例代码。尚硅谷是一家知名的在线教育机构，其课程通常涵盖了从基础到进阶的各种技术主题。 在...
javascript练习
02-07
在“javascript练习”这个主题中，我们将会深入探讨JavaScript的基础知识、核心概念以及实际应用。 首先，我们要了解JavaScript的基础语法，包括变量声明（`var`, `let`, `const`）、数据类型（如字符串、数字、...
js代码-JS练习4
07-16
JavaScript（简称JS）是一种轻量级的编程语言，主要用于网页和网络应用的开发。这个"JS练习4"可能是一个学习者或开发者为了提高JS技能而设计的一组练习题或者项目。下面，我们将深入探讨JavaScript的一些核心概念和...
js代码-javascript练习
07-15
通过以上讲解，我们可以看到"js代码-javascript练习"这个主题涵盖了大量的JavaScript基础知识，无论是初学者还是有经验的开发者，都可以通过练习来提升自己的技能。实际操作这些代码将有助于理解并掌握JavaScript的...
JS 练习
weixin_47186832的博客
11-15 280
1、if 语句 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var a=3; //a=11; if (a<10){//它的表达式可以是比较复杂的逻辑表达式如：a<10&&a>1 document.write("wu
js 练习
Wanan
11-06 251
typeof 判断类型// 不符合预期的值，typeof判断null类型和函数的类型 typeof alert // "function" typeof null // "object" typeof qaz // "undefined"变量声明提升// a 值会是多少？ console.log(a); var a = 2;// a值会是undefined，为什么？ // 因为变量声明提升了，上面的
Js练习
qq_43246404的博客
07-14 126
1.push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。revese()方法用于颠倒数组中元素的顺序。 2.reverse()方法用于颠倒数组中元素的顺序。 3.concat()方法用于连接两个或多个数组，该方法不会改变现有的数组，儿仅仅会返回被链接数组的一个副本。返回值是一个新的数组。 4.sort()方法用于对数组的元素进行排序。 ...
JS练习
黑胡子大叔的博客
10-09 183
数组技巧练习 var fruits1=["apple","banana"]; var fruits2=["apple2","banana2"]; var fruits3=[...fruits1,...fruits2]; var fruits4=["orange","apple","apple"]; var colors = ["blue","black","white"]; console.log("在数组中随机抽取五个"); for(var i=0;
js的练习
mitara的博客
06-07 343
被迫营业的第5天 学习内容：js的练习 练习一：用户输入一个三位数，弹出各个数位的和。比如：用户输入155，就弹出11用户输入316，就弹出10用户输入989，就弹出26用户输入678，就弹出21 练习二：大家从小到大，都玩儿过的一个庸俗的游戏：游戏玩儿法就是，大家轮流报数，如果报到能被7整除的数字，或者尾数是7的数字，都算踩地雷了。就应该罚唱歌。请在控制台输出1~60之间的所有“安全数”。比如：1、2、3、4、5、6、8、9、10、11、12、13、15、16、18、19、20、22、23、24、2
Json对象与Json字符串互转(4种转换方式)
ning_vina的专栏
05-27 403
jQuery插件支持的转换方式： $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象  浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器： JSON.parse(jsonstr); //可以将json字符串转换成json对象 ...
javascript 练习案例
最新发布
09-19
JavaScript 练习案例通常涵盖了各种编程概念和技术，以下是几个常见的案例： 1. **基本语法练习**：例如创建变量、数据类型（字符串、数字、布尔值等）、条件语句（if...else、switch）、循环（for、while）以及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值