2020-09-20

最新推荐文章于 2024-07-24 16:53:23 发布

小黑 .

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量100

点赞数 2

分类专栏：学习笔记文章标签： jquery js html css

本文链接：https://blog.csdn.net/qq_46649900/article/details/108700462

版权

学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

笔记

7 篇文章 0 订阅

订阅专栏

使用jquery动态添加学生信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.navBar {
			border: 1px solid rgba(0,0,0,0.1);
			width: 1000px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			position: absolute;
			left: 50%;
			margin-left: -500px;
		}
		.navBar input {
			outline-style: none;
		}
		.navTable table {
			width: 1000px;
			border: 1px solid #000000;
			border-collapse: collapse;
			/*position: absolute;*/
			position: fixed;
			left: 50%;
			top: 15%;
			margin-left: -500px;
		}
		.navTable tr {
			border: 1px solid #000000;
		}
		.navTable th {
			background-color: skyblue;
			border: 1px solid #000000;
			height: 34px;
			line-height: 34px;
		}
		.navTable td {
			border: 1px solid #000000;
			text-align: center;
			height: 26px;
			line-height: 26px;
			position: relative;
		} 
		.navTable td a {
			position: absolute;
			width: 60px;
			height: 22px;
			line-height: 22px;
			left: 50%;
			top: 50%;
			margin-top: -12px;
			margin-left: -30px;
			text-align: center;
			color: black;
			text-decoration: none;
			border: 1px solid #000000;
			background-color: #f5f5f5;
			border-radius: 3px;
		}
		.navTable td a:hover {
			color: blue;
		}
	</style>
</head>
<body>
	<script src="../jQuery/jquery/jquery.js"></script>
	<script>
		$( () => { 
			//设置title值
			$(document).attr("title", "动态添加学生信息");
			$('#btn').click( () => {
				//获取input的type为text的值
				const sOrder = $('#sOrder').val();
				const sName = $('#sName').val();
				const sId = $('#sId').val();
				
				/**
				 * 获取input的type为radio的值-----三种方法
				 */
				// const sSex = $('input:radio:checked').val()；
				const sSex = $("input[type='radio']:checked").val();
				// const sSex = $("input[name='sex']:checked").val();

				//动态添加<tr></tr>以及其内容
				const tr = $("<tr>" + 
					"<td> " + sOrder + "</td>" + 
					"<td> " + sName + "</td>" + 
					"<td> " + sId + " </td>" +
					 "<td> " + sSex + " </td>" + 
					 "<td><a href='deleteEmp?id="+ sOrder + "'>删除</a></td>" + 
					 "</tr>");
				//将动态添加的<tr></tr>放入到table下
				 $(".navTable table").append(tr);

				  //删除指定的<tr></tr>的内容
				  //找到tr下的所有子元素的子元素，也就是<a></a>，并且点击它
				  tr.children().children().click( () => {
       				
       				/**
       				 * 第一种方法---a
       				 */
       				// return deteleTr(tr);
       				

       				/**
       				 * 第二种方法
       				 */
       				//删除点击到的tr行，并且返回一个false
       				tr.remove();
       				//阻止函数继续执行
       				return false;
       
				  })

				 // tr.children().children().click( () => {
				 // 	console.log($(domEle).parent().parent().children(":first").text());
				 // 	// return true;
				 // })
				 

				 /**
				  * 第一种方法---a
				  */
				//  function deteleTr(instance) {
			 //      //   var flag = window.confirm("您确定要删除" + instance.children(":first").text() + "名称的值吗？");
			 //      //   if(!flag){
			 //      //   	return false;
			 //      //   } 
			 //      //   else {
			 //      //     	instance.remove();
			 //      //     	return false;
			 //      //   }
			 //      //   return false;
			 //      // }
			      

			 /**
			  * 第一种方法---b
			  */
			 //      	if(false) {
			 //      		return false;  
			 //     	}
			 //      	else {
			 //      		instance.remove();
			 //      		return false;
			 //      	}
			 //      	return false;
				// };
			})
		})
	</script>
	<div class="navBar">
		序号：<input type="text" value="" id="sOrder" placeholder="请输入你的序号...">
		姓名：<input type="text" value="" id="sName" placeholder="请输入你的姓名...">
		学号：<input type="text" value="" id="sId" placeholder="请输入你的学号...">
		<span>性别:</span>
		男：<input type="radio" name="sex" checked="checked" class="sSex sSexFirst" value="男">
		女：<input type="radio" name="sex" class="sSex sSexSecond" value="女">
		<input type="button" value="添加" id="btn">
	</div>
	<div class="navTable">
		<table>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>学号</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</table>
	</div>
</body>
</html>

小黑 .

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
2020-09-20

使用jquery动态添加学生信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .navBar { border: 1px solid rgba(0,0,0,0.1); width: 1000px; height: 60px; line-height
复制链接

扫一扫