前端學習-學生成績管理系統（填寫信息顯示在表格中並進行修改刪除操作）

效果

在左邊填寫信息，點擊提交錄入右邊的表格；
序號自增（不使用數組的方法刪除該行後序號有誤）；
點擊各行的修改按鈕，提取數據回顯到左邊的輸入框中，修改後點擊提交，修改後的內容顯示在表格中；
點擊各行的刪除按鈕，從表格中刪除該條數據；

不使用數組的不完整js實現方法

html標籤

		<!-- 左邊部分 -->
		<div id="left">
			<span id="title">填寫信息</span>
			<form class="form" id="form" onsubmit="return false">
				<div class="form-group">
					<input id="name" type="text" placeholder="請輸入姓名">
					<hr />
				</div>
				<div class="form-group">
					<input id="num" type="text" placeholder="請輸入學號">
					<hr />
				</div>
				<div class="form-group">
					<input id="classes" type="text" placeholder="請輸入班級">
					<hr />
				</div>
				<div class="form-group">
					<input id="course" type="text" placeholder="請輸入課程名稱">
					<hr />
				</div>
				<div class="form-group">
					<input id="score" type="text" placeholder="請輸入課程分數">
					<hr />
				</div>
				<button id="left-btn" type="submit" onclick="add()">提交</button>
			</form>
		</div>
		<!-- 左邊部分結束 -->


		<!-- 右邊部分 -->
		<div id="right">
			<table id="tb-title" rules="all">
				<tr>
					<th>序號</th>
					<th>姓名</th>
					<th>學號</th>
					<th>班級</th>
					<th>課程</th>
					<th>分數</th>
					<th>操作</th>
				</tr>

				<tr>
					<td><span id="number">1</span></td>
					<td>張三</td>
					<td>631646131</td>
					<td>一年級1班</td>
					<td>數學</td>
					<td>90</td>
					<td>
						<button onclick="edit()">修改</button>
						<button onclick="del()">刪除</button>
					</td>
				</tr>
			</table>
		</div>
		<!-- 右邊部分結束 -->

js

		<script>
			function add() {
				var name = document.getElementById("name").value;
				var num = document.getElementById("num").value;
				var classes = document.getElementById("classes").value;
				var course = document.getElementById("course").value;
				var score = document.getElementById("score").value;				
				// 檢查輸入
				if (name == null || name == "") {
					alert("姓名不能爲空");
					return false;
				} else if (num == null || num == "") {
					alert("學號不能爲空");
					return false;
				} else if (classes == null || classes == "") {
					alert("班級不能爲空");
					return false;
				} else if (course == null || course == "") {
					alert("課程不能爲空");
					return false;
				} else if (score == null || score == "") {
					alert("分數不能爲空");
					return false;
				} else {
					//創建一行
					var tr = document.createElement("tr");
					var td1 = document.createElement("td");
					var td2 = document.createElement("td");
					var td3 = document.createElement("td");
					var td4 = document.createElement("td");
					var td5 = document.createElement("td");
					var td6 = document.createElement("td");
					var td7 = document.createElement("td");

					//獲取到的值進行賦值
					td2.innerHTML = name;
					td3.innerHTML = num;
					td4.innerHTML = classes;
					td5.innerHTML = course;
					td6.innerHTML = score;

					//序號自增
					var n = document.createElement("span");
					var rows = document.getElementsByTagName("tr");
					var t = document.createTextNode(rows.length);
					n.appendChild(t);
					td1.appendChild(n);

					//操作中的兩個button
					var btn = document.createElement("div");
					var btn_1 = document.createElement("button");
					var btn_2 = document.createElement("button");
					btn_1.innerHTML = "修改";
					btn_1.setAttribute('onclick', 'edit(this)');
					btn_2.innerHTML = "刪除";
					btn_2.setAttribute('onclick', 'del(this)');
					btn.appendChild(btn_1);
					btn.appendChild(btn_2);
					//button組放入td7
					td7.appendChild(btn);

					//將所有td標籤對放入tr中
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(td6);
					tr.appendChild(td7);
					var table = document.getElementById("tb-title");
					table.appendChild(tr);
					document.getElementById("form").reset();
				}
			}

			//修改
			function edit(obj) {
				//獲取到的值顯示在form表單中
				var parentTr = obj.parentNode.parentNode.parentNode;
				var td_gp = parentTr.childNodes;
				document.getElementById("name").value = td_gp[1].innerHTML;
				document.getElementById("num").value = td_gp[2].innerHTML;
				document.getElementById("classes").value = td_gp[3].innerHTML;
				document.getElementById("course").value = td_gp[4].innerHTML;
				document.getElementById("score").value = td_gp[5].innerHTML;
				//這裏綁定了兩次，存在一定問題但不影響運行結果，jQuery方法中進行了修改
				document.getElementById("left-btn").onclick=function(){
					//獲取input框的值
					var name = document.getElementById("name").value;
					var num = document.getElementById("num").value;
					var classes = document.getElementById("classes").value;
					var course = document.getElementById("course").value;
					var score = document.getElementById("score").value;
					// 檢查輸入
					if (name == null || name == "") {
						alert("姓名不能爲空");
						return false;
					} else if (num == null || num == "") {
						alert("學號不能爲空");
						return false;
					} else if (classes == null || classes == "") {
						alert("班級不能爲空");
						return false;
					} else if (course == null || course == "") {
						alert("課程不能爲空");
						return false;
					} else if (score == null || score == "") {
						alert("分數不能爲空");
						return false;
					} else {
						td_gp[1].innerHTML = name;
						td_gp[2].innerHTML = num;
						td_gp[3].innerHTML = classes;
						td_gp[4].innerHTML = course;
						td_gp[5].innerHTML = score;						
					}
				}
			}


			//刪除
			function del(obj) {
				var parentTr = obj.parentNode.parentNode.parentNode;
				document.getElementById("tb-title").removeChild(parentTr);
			}
		</script>

css

#left{
	width: 300px;
}
#title{
	position: absolute;
	left: 120px;
	top: 70px;
	width: 100px;
	height: 30px;
	font-size: 20px;
	text-align: center;
}
#left form{
	width: 250px;
	position: absolute;
	left: 50px;
	top: 120px;

}
#left-btn{
	position: absolute;
	top: 265px;	
	width: 250px;
	height: 30px;
	background: rgba(45, 153, 254, 1);
	opacity: 1;
	border: 1px solid rgba(45, 153, 254, 1);
	border-radius: 2px;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 22px;
	color: rgba(255, 255, 255, 1);
	
}
.form-group{
	width: 250px;
	height: 50px;
}
.form-group span{
	margin-left: 20px;
}
input {
	width: 90%;	
	color: #000000;
	font-weight: 100;
	border: none;
	background: none;
	outline: none;
	padding: 5px;
	font-size: 13px;
}
hr{
	width: 250px;
}




#right{
	position: absolute;
	left: 360px;	
	
}
#tb-title{
	width: 900px;
	position: absolute;
	top: 60px;
	text-align: center;
	border: 1px solid rgba(45, 153, 254, 1);
	
}
input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px white inset !important;
}

使用數組的js實現方式

html標籤

		<!-- 左邊部分 -->
		<div id="left">
			<span id="title">填寫信息</span>
			<form class="form" id="form" onsubmit="return false">
				<input id="id" type="hidden" />
				<div class="form-group">
					<input id="name" type="text" placeholder="請輸入姓名">
					<hr />
				</div>
				<div class="form-group">
					<input id="num" type="text" placeholder="請輸入學號">
					<hr />
				</div>
				<div class="form-group">
					<input id="classes" type="text" placeholder="請輸入班級">
					<hr />
				</div>
				<div class="form-group">
					<input id="course" type="text" placeholder="請輸入課程名稱">
					<hr />
				</div>
				<div class="form-group">
					<input id="score" type="text" placeholder="請輸入課程分數">
					<hr />
				</div>
				<button id="left-btn" type="submit" onclick="add()">提交</button>
			</form>
		</div>
		<!-- 左邊部分結束 -->


		<!-- 右邊部分 -->
		<div id="right">
			<table id="tb-title" rules="all">
				<thead>
					<tr>
						<th>序號</th>
						<th>姓名</th>
						<th>學號</th>
						<th>班級</th>
						<th>課程</th>
						<th>分數</th>
						<th>操作</th>
					</tr>
				</thead>

				<tbody id="tbody">
				</tbody>
			</table>
		</div>
		<!-- 右邊部分結束 -->

js

		<script>
			//創建數組
			var arr = [];
			//tbody內容
			function val(){
				var tbodyHtmlStr = '';
				for(var i = 0; i < arr.length; i++) {
					tbodyHtmlStr += '<tr>';
					tbodyHtmlStr += '<td>'+(i+1)+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].name+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].num+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].classes+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].course+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].score+'</td>';
					tbodyHtmlStr += '<td>';
					tbodyHtmlStr += '<button onclick="edit(this,' + i + ')">修改</button>';
					tbodyHtmlStr += '<button onclick="del(this,' + i + ')">刪除</button>';
					tbodyHtmlStr += '</td>';
					tbodyHtmlStr += '</tr>';					
				}return tbodyHtmlStr;
			} 
		
			function add() {
				var id = document.getElementById("id").value;
				var name = document.getElementById("name").value;
				var num = document.getElementById("num").value;
				var classes = document.getElementById("classes").value;
				var course = document.getElementById("course").value;
				var score = document.getElementById("score").value;
				//檢查輸入
				if (name == null || name == "") {
					alert("姓名不能爲空");
					return false;
				} else if (num == null || num == "") {
					alert("學號不能爲空");
					return false;
				} else if (classes == null || classes == "") {
					alert("班級不能爲空");
					return false;
				} else if (course == null || course == "") {
					alert("課程不能爲空");
					return false;
				} else if (score == null || score == "") {
					alert("分數不能爲空");
					return false;
				} else {
					if(id == '' || id == undefined) {
						arr.push({
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						});
					} else {
						arr[id] = {
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						};
					}
					
					document.getElementById("tbody").innerHTML = val();
					document.getElementById("form").reset();	
				}			
			}


			//刪除
			function del(obj,i){
				arr.splice(i,1);
				document.getElementById("tbody").innerHTML = val();
			}


			//修改
			function edit(obj,i){
				//獲取到的值顯示在form表單中
				document.getElementById("id").value = i;
				document.getElementById("name").value = arr[i].name;
				document.getElementById("num").value = arr[i].num;
				document.getElementById("classes").value = arr[i].classes;
				document.getElementById("course").value = arr[i].course;
				document.getElementById("score").value = arr[i].score;
			}
						
		</script>

css

同上

使用jQuery實現

html標籤

與之前的方法相比，只刪除了提交按鈕的綁定事件

		<!-- 左邊部分 -->
		<div id="left">
			<span id="title">填寫信息</span>
			<form class="form" id="form" onsubmit="return false">
				<input id="id" type="hidden" />
				<div class="form-group">
					<input id="name" type="text" placeholder="請輸入姓名">
					<hr />
				</div>
				<div class="form-group">
					<input id="num" type="text" placeholder="請輸入學號">
					<hr />
				</div>
				<div class="form-group">
					<input id="classes" type="text" placeholder="請輸入班級">
					<hr />
				</div>
				<div class="form-group">
					<input id="course" type="text" placeholder="請輸入課程名稱">
					<hr />
				</div>
				<div class="form-group">
					<input id="score" type="text" placeholder="請輸入課程分數">
					<hr />
				</div>
				<button id="left-btn" type="submit">提交</button>
			</form>
		</div>
		<!-- 左邊部分結束 -->

		<!-- 右邊部分 -->
		<div id="right">
			<table id="tb-title" rules="all">
				<thead>
					<tr>
						<th>序號</th>
						<th>姓名</th>
						<th>學號</th>
						<th>班級</th>
						<th>課程</th>
						<th>分數</th>
						<th>操作</th>
					</tr>
				</thead>

				<tbody id="tbody">

				</tbody>
			</table>
		</div>
		<!-- 右邊部分結束 -->

js

		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			//創建數組
			var arr = [];

			function val() {
				var tbodyHtmlStr = '';
				for (var i = 0; i < arr.length; i++) {
					tbodyHtmlStr += '<tr>';
					tbodyHtmlStr += '<td>' + (i + 1) + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].name + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].num + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].classes + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].course + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].score + '</td>';
					tbodyHtmlStr += '<td>';
					tbodyHtmlStr += '<button onclick="edit(this,' + i + ')">修改</button>';
					tbodyHtmlStr += '<button onclick="del(this,' + i + ')">刪除</button>';
					tbodyHtmlStr += '</td>';
					tbodyHtmlStr += '</tr>';
				}
				return tbodyHtmlStr;
			}

			$("#left-btn").click(function() {
				var id = $("#id").val();
				var name = $("#name").val();
				var num = $("#num").val();
				var classes = $("#classes").val();
				var course = $("#course").val();
				var score = $("#score").val();
				//檢查輸入
				if (name == null || name == "") {
					alert("姓名不能爲空");
					return false;
				} else if (num == null || num == "") {
					alert("學號不能爲空");
					return false;
				} else if (classes == null || classes == "") {
					alert("班級不能爲空");
					return false;
				} else if (course == null || course == "") {
					alert("課程不能爲空");
					return false;
				} else if (score == null || score == "") {
					alert("分數不能爲空");
					return false;
				} else {
					if (id == '' || id == undefined) {
						arr.push({
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						});
					} else {
						arr[id] = {
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						};
					}
					$("#tbody").html(val());
					$("#form")[0].reset();
				}
			});

			//刪除
			function del(obj, i) {
				arr.splice(i, 1);
				$("#tbody").html(val());
			}

			//修改
			function edit(obj, i) {
				//獲取到的值顯示在form表單中
				$("#id").val(i);
				$("#name").val(arr[i].name);
				$("#num").val(arr[i].num);
				$("#classes").val(arr[i].classes);
				$("#course").val(arr[i].course);
				$("#score").val(arr[i].score);
			}
		</script>

css

同上