weiyong
/
201912G12


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<style type="text/css">
				body {
					line-height: 20px;
					font: 14px Helvetica Neue, Helvetica, PingFang SC, \5FAE\8F6F\96C5\9ED1, Tahoma, Arial, sans-serif;
				}
				
				.layui-btn {
					background: #1E9FFF;
					display: inline-block;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;	
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
				}
				
				.layui-btn:hover {
				opacity: .8;
				filter: alpha(opacity=80);
				color: #fff;
				}
				
				table {
					margin-top: 10px;
					border-spacing: 0;
					width: 100%;
					text-align: center;
					border: 1px solid #E6E6E6;
				}
				
				table thead tr th {
					background: #F2F2F2;
					height: 12px;
					line-height: 12px;
					padding: 5px 10px;
					border-bottom: 1px solid #E6E6E6;
					border-right: 1px solid #E6E6E6;
					text-align: center;
				}
				
				table tbody tr td {
					width: 10%;
					background: #FFFFFF;
					height: 12px;
					line-height: 12px;
					padding: 5px 10px;
					border-bottom: 1px solid #E6E6E6;
					border-right: 1px solid #E6E6E6;
				}
				
				table tbody tr td input {
					height: 22px;
					border: 0px;
					border-bottom: 1px solid #DEDEDE;
				}
				
				table tbody tr:hover td {
					background: #F2F2F2;
				}
				
				a {
					display: inline-block;
					margin: 3px 5px;
					color: #009688;
				}
				
				a:hover {
					cursor: pointer;
					color: #1E9FFF;
					text-decoration: underline;
				}
				
				label {
					cursor: pointer;
				}
				
				label input {
					cursor: pointer;
					position: relative;
					top: 1px;
				}
			</style>	
	</head>
	<body> 
	<div class="head" id="home">
	<div class="header">
		<div class="menu">
			<ul class="nav" id="nav">
				<li><a href="contact.html">返回</a></li>
				<li><a href="chengjidengji.html">成绩登记</a></li>
				<li><a href="chengjiguanli.html" class="active">成绩管理</a></li>
			</ul>
			</div>
			</div>
			</div>
	        <!----start-top-nav-script---->
	        <script type="text/javascript" src="js/responsive-nav.js"></script>
			<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
			</script>
			<br /><br /><br /><br />
		<div>
				<div>
							<button class="layui-btn" onclick="addRow()">新增行</button>
							<label for="saver"><input type="checkbox" id ="saverow">新增前保存所有行</label>
						</div>
							<table id="test">
								<thead>
									<tr>
										<th>序号</th>
										<th>编号</th>
										<th>姓名</th>
										<th>学院</th>
										<th>项目</th>
										<th>成绩</th>
										<th>排名</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>1</td>
										<td>1801010145</td>
										<td>小李</td>
										<td>软件学院</td>
										<td>跳远</td>
										<td>95</td> <!-- <input type="text"> -->
										<td>14</td>
										<td><a>修改</a><a>删除</a></td>
									</tr>
									<tr><td>2</td>
										<td>1801010436</td>
										<td>小张</td>
										<td>软件学院</td>
										<td>跳高</td>
										<td>88</td>
										<td>34</td>
										<td><a>修改</a><a>删除</a></td>
									</tr>
							
								</tbody>
							</table>
							
							<script type="text/javascript">
								$(function(){
									//load加载动态修改表格样式
									if($("#test tbody tr").length > 0){
										$("#test").css("border-bottom", "0px");
										$("#test").css("border-right", "0px");
									}
									
									//注册表格操作点击事件
									registerClick();
								});
								
								//注册表格操作点击事件
								function registerClick(){
									//防止重复注册事件：.off("click")
									$("#test tbody tr td a").off("click").on("click", function(){
										var text = $(this).text();
										switch(text){
											case "修改":
												updateRow($(this));
												break;
											case "保存":
												saveRow($(this));
												break;
											case "删除":
												deleteRow($(this));
												break;
										}
									});
								}
								
								//新增行
					            function addRow(){
								if($("#saverow").is(':checked')){
								saveAllRow();//保存所有行
								}
								var rowindex=$("#test tbody tr").length+1;
								var str="<tr><td>"+rowindex+"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><a>保存</a><a>删除</a></td></tr>";
								$("#test tbody").append(str);
								registerClick();//注册表格操作点击事件	
								}
								
								//修改行
								function updateRow(t){
									$(t).text("保存");
									var tr = $(t).parent().parent();
									var tds = $(tr).children();
									for (var i = 0; i < tds.length; i++) {
										if(i>0 && i<tds.length-1){
											var td = tds[i];
											var text = $(td).text();
											$(td).html("<input type='text' value='"+text+"'>");
										}
									}
								}
								
								//保存行
								function saveRow(t){
									$(t).text("修改");
									var tr = $(t).parent().parent();
									var tds = $(tr).children();
									for (var i = 0; i < tds.length; i++) {
										if(i>0 && i<tds.length-1){
											var td = tds[i];
											var text = $(td).children("input").val();
											$(td).html(text);
										}
									}
								}
								
								//删除行
								function deleteRow(t){
									if(confirm("是否删除行?")){
										var tr = $(t).parent().parent();
										$(tr).remove();
										resetSerialNum();//重置序号
									}
								}
								
								//新增行前保存所有行
								function saveAllRow(){
									var trs = $("#test tbody tr");
									for (var i = 0; i < trs.length; i++) {
										if($(trs[i]).children("td:nth-child(5)").children("a:nth-child(1)").text() == "保存"){
											$(trs[i]).children("td:nth-child(5)").children("a:nth-child(1)").click();
										}
									}
								}
								
								//重置序号
								function resetSerialNum(){
									var trs = $("#test tbody tr");
									for (var i=0;i<trs.length;i++) {
										$("#test tbody tr:nth-child("+(i+1)+") td:nth-child(1)").text(i+1);
									}
								}
								
							</script>
						
					</body>
				</html>