天天看點
傳回

javascript寫的學生管理系統，簡單的表格操作——小小鐘

對表格的基本操作，增加，删除一行資料

增加一行資料的操作

function add(){
				var id = window.prompt("請輸入學生的學号","");
				var name = window.prompt("請輸入學生的姓名","");
				var sex = window.prompt("請輸入學生的性别","");
				var address = window.prompt("請輸入學生的位址","");
				var grade = window.prompt("請輸入學生的分數","");
				if(id==null || name==null || sex==null || address==null || grade==null){
					alert("添加失敗，資訊不能為空!");
					return ;
				}
				var tabNode = document.getElementsByTagName("table")[0];
				var trNode = tabNode.insertRow(count);
				var tdNode0 = trNode.insertCell(0);
				var tdNode1 = trNode.insertCell(1);
				var tdNode2 = trNode.insertCell(2);
				var tdNode3 = trNode.insertCell(3);
				var tdNode4 = trNode.insertCell(4);
				var tdNode5 = trNode.insertCell(5);
				tdNode0.innerHTML = id;
				tdNode1.innerHTML = name;
				tdNode2.innerHTML = sex;
				tdNode3.innerHTML = address;
				tdNode4.innerHTML = grade;
				tdNode5.innerHTML = "<span id='del' οnclick='del(this)'>删除學生</span>";
				count++;
			}

删除一行的操作

function del(index){
				var rowIndex = index.parentNode.parentNode.rowIndex;
				document.getElementById("tb1").deleteRow(rowIndex);
				count--;
			}

下面是源碼，當然了這個程式還沒有連接配接資料庫

<html>
	<head>
		<script type="text/javascript">
			var count=1;
			function add(){
				var id = window.prompt("請輸入學生的學号","");
				var name = window.prompt("請輸入學生的姓名","");
				var sex = window.prompt("請輸入學生的性别","");
				var address = window.prompt("請輸入學生的位址","");
				var grade = window.prompt("請輸入學生的分數","");
				if(id==null || name==null || sex==null || address==null || grade==null){
					alert("添加失敗，資訊不能為空!");
					return ;
				}
				var tabNode = document.getElementsByTagName("table")[0];
				var trNode = tabNode.insertRow(count);
				var tdNode0 = trNode.insertCell(0);
				var tdNode1 = trNode.insertCell(1);
				var tdNode2 = trNode.insertCell(2);
				var tdNode3 = trNode.insertCell(3);
				var tdNode4 = trNode.insertCell(4);
				var tdNode5 = trNode.insertCell(5);
				tdNode0.innerHTML = id;
				tdNode1.innerHTML = name;
				tdNode2.innerHTML = sex;
				tdNode3.innerHTML = address;
				tdNode4.innerHTML = grade;
				tdNode5.innerHTML = "<span id='del' οnclick='del(this)'>删除學生</span>";
				count++;
			}
			
			function del(index){
				var rowIndex = index.parentNode.parentNode.rowIndex;
				document.getElementById("tb1").deleteRow(rowIndex);
				count--;
			}
			
		</script>
		
		<style type="text/css">
			h1{
				text-align:center;
			}
			table {
				width:90%;
				margin:0 auto;
				border:1px solid red;
			}
			#add{
				width:100px;
				height:30px;
				margin-left:25%;
				text-decoration:underline;
				cursor:pointer;
			}
			#del{
				width:65px;
				height:30px;
				text-decoration:underline;
				cursor:pointer;
			}
			tr td{
				text-align:center;
				border:1px;
			}
		</style>	
	</head>
	
	<body>
		<table id="tb1">
			<h1>學生管理系統</h1>
			<div id="add" οnclick="add()">添加學生</div>
			<tr>
				<th>id</th>
				<th>name</th>
				<th>sex</th>
				<th>address</th>
				<th>grade</th>
				<th>Manager</th>
			</tr>
		</table>
	</body>
</html>
javascript
上一篇: 阿裡架構師經驗分享！Kafka的精髓全寫這本“限量筆記”裡了寫在最後
下一篇: SolidWorks stp檔案轉成實體

繼續閱讀