实验5pxy

最新推荐文章于 2024-07-15 15:13:08 发布

请再等一下丶

最新推荐文章于 2024-07-15 15:13:08 发布

阅读量120

点赞数

文章标签： css html jquery javascript

本文链接：https://blog.csdn.net/p1534179877/article/details/116191809

版权

<style type="text/css">
					body {
						margin: 0;
					}
		
					.container {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 600px;
						top: 10px;
						position: absolute;
						left: calc(50% - 300px);
					}
		
					table {
						margin-top: 30px;
						background-color: black;
					}
		
					tr {
						text-align: center;
					}
		
					th,
					tr {
						height: 30px;
						background-color: white;
						border-radius: 1px;
						width: 80px;
					}

					table th:nth-child(4),
					th:nth-child(4):hover {
						cursor: default;
					}
		
					.subitem {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
		
					input {
						margin: 10px 5px 10px 5px;
						width: 150px;
					}
		
					
					.subbtn{
						width: 80px; 
						margin: 0 0 0 300px;
					}
				</style>


```xml
<body>
		<div class="container">
					<div class="subitem">
						<form >
							<lable>学号:</lable><input type="text" id="stuno" placeholder="输入学号">
							<lable>姓名:</lable><input type="text" id="stuname" placeholder="输入姓名">
							<br/>
							<lable>院系:</lable><input type="text" id="studepart" placeholder="输入院系">
							<lable>专业:</lable><input type="text" id="stumajor" placeholder="输入专业">
							<br>
							<input class="subbtn" type="button" value="保存">
						</form>
					</div>
					<table class="table">
						<thead>
							<tr>
								<th >学号</th>
								<th >姓名</th>
								<th >院系</th>
								<th >专业</th>
								<th></th>
							</tr>
						</thead>
					</table>
				</div>

	</body>

<script type="text/javascript">
		
		var addData = function(value){
			var $tr = $("<tr></tr>");
			for(v in value){
				var $td = $("<td></td>");
				$td.append(value[v]);
				$td.appendTo($tr);
			}
			$tr.append("<td><a href='#' class='change'>修改</a>|<a href='#' class='delete'>删除</a></td>")
			$tr.appendTo(".table");
		}
		
		var loadData = function(){
			$.ajax({
				type:"GET",
				dataType:"json",
				url:"http://60.205.177.189:8080/stu/getAllStu",
				success:function(result){
				   result.data.forEach(function(value,index){
				   addData(value);
				})
		},})
		}
		
		loadData();


		$(".subbtn").click(function() {
			var input = {};
			$("input:text").each(function(index, domEle) {
				input[domEle.id] = $(domEle).val();
			});
			addnewdata(input);
			})
			//请求添加数据
			var addnewdata = function(student) {
				$.ajax({
					type: "POST",
					dataType: "JSON",
					data: JSON.stringify(student),
					contentType: "application/json",
					url: "http://60.205.177.189:8080/stu/addStu",
					success: function(result) {
						addData(student);
					}
					
				})
			}
			//添加单条数据
			
			
			
			var deleteData = function(id) {
				$.ajax({
					type: "POST",
					dataType: "json",
					url: "http://60.205.177.189:8080/stu/delete/" + id,
					success: function(result) {
						console.log('删除成功')
					},
					
				})
			}
			//点击删除数据行
			$(".table").on('click', ".delete", function() {
				var id = $(this).parent().parent().children("td:first-child").html();
				deleteData(id);
				$(this).parents("tr").remove();
			})


			//点击修改数据行
			var datas = {}; //获取数据并显示在input中，然后删除该条数据
			$(".table").on('click', ".change", function() {
				//遍历当前数据行
				$(this).parents("tr").children("td").each(
					function(i, v) {
							if (i < 4) datas[i] = v.innerHTML;
					}
				)
				
				$("#stuno").val(decodeURI(datas[0]));
				$("#stuname").val(decodeURI(datas[1]));
				$("#studepart").val(decodeURI(datas[2]));
				$("#stumajor").val(decodeURI(datas[3]));
				deleteData(datas[0]);
			})

	</script>

请再等一下丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验5pxy

<style type="text/css"> body { margin: 0; } .container { display: flex; flex-direction: column; align-items: center; width: 600px; top: 10px; position: absolute; left: calc(50% - 300px
复制链接

扫一扫