Javascript面对对象-学生信息管理系统

最新推荐文章于 2023-01-03 20:54:37 发布

ThatMonth

最新推荐文章于 2023-01-03 20:54:37 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： dom

本文链接：https://blog.csdn.net/weixin_44853310/article/details/109495232

版权

JavaScript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏


<body>	
	<center>
		<h1>学生信息管理系统</h1><hr>
		<button onclick="add_btn(this)">增加 >> </button>
		<button onclick="Delete(this)">删除 >> </button>
		<button onclick="change_btn(this)">修改 >> </button>
		<button onclick="serach_btn(this)">查找 >> </button>


		<div id="add_div" style="display:none">
			<input id="name">
			<input id="age">
			<input id="gender">
			<select id="grade"></select>
			<button type="button" onclick="save()">确定</button>
		</div>


    	<div id="delete_div" style="display:none">
			
			<button type="button" onclick="Delete()">确定</button>
		</div>


		<div id="change_div" style="display:none">
			
			<button type="button" onclick="change()">确定</button>
		</div>


		<div id="search_div" style="display:none">
			
			<button type="button" onclick="search()">确定</button>
		</div>


		<table id="mytable">
			<tr>
				<th>姓名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>年龄&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>性别&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>班级&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
			</tr>
		</table>










	</center>
</body>

<script>
window.onload = function() {
	// 加载班级(从localstorage加载)
	var arr = [{value:13, text:"软件18-13"}, {value:15, text:"软件18-15"}];
	var grade = document.getElementById('grade');
	grade.options.length = 0;

	for(var i=0; i<arr.length; i++) {
		var opt = new Option(arr[i].text, arr[i].value);
		grade.options.add(opt);
	}
}

function save() {	//增加
	var name = document.all.name.value;
	var age = document.all.age.value;
	var gender = document.all.gender.value;
	var grade = document.all.grade.value;
	
	var tb = document.getElementById('mytable');
	var tr = document.createElement('tr');

	tr.innerHTML = "<td>"+name+"</td><td>"+age+"</td><td>"
					+gender+"</td><td>"+grade+"</td><td><a href='#'>删除</td>";
	tb.appendChild(tr);
}


function Delete() {	//删除
	
	
	var tb = document.getElementById('mytable');
	var zz = tb.children[tb.children.length-1];
	
	tb.removeChild(zz);
	
}


function change() {	//修改
	var name = document.all.name.value;
	var age = document.all.age.value;
	var gender = document.all.gender.value;
	var grade = document.all.grade.value;
	
	var tb = document.getElementById('mytable');
	var tr = document.createElement('tr');

	tr.innerHTML = "<td>"+name+"</td><td>"+age+"</td><td>"
					+gender+"</td><td>"+grade+"</td><td><a href='#'>删除</td>";
	tb.appendChild(tr);
}


function serach() {	//查找
	var name = document.all.name.value;
	var age = document.all.age.value;
	var gender = document.all.gender.value;
	var grade = document.all.grade.value;
	
	var tb = document.getElementById('mytable');
	var tr = document.createElement('tr');

	tr.innerHTML = "<td>"+name+"</td><td>"+age+"</td><td>"
					+gender+"</td><td>"+grade+"</td><td><a href='#'>删除</td>";
	tb.appendChild(tr);
}





function add_btn(btn) {//增加
	var elm = document.getElementById('add_div');
	if(btn.innerText == '增加 >>') {
		elm.style.display = '';
		btn.innerText = '增加 <<';
	} else {
		elm.style.display = 'none';
		btn.innerText = '增加 >>';
	}
}


function delete_btn(btn) {//删除
	var elm = document.getElementById('delete_div');
	if(btn.innerText == '删除 >>') {
		elm.style.display = '';
		btn.innerText = '删除 <<';
	} else {
		elm.style.display = 'none';
		btn.innerText = '删除 >>';
	}
}



function change_btn(btn) {//修改
	var elm = document.getElementById('change_div');
	if(btn.innerText == '修改 >>') {
		elm.style.display = '';
		btn.innerText = '修改 <<';
	} else {
		elm.style.display = 'none';
		btn.innerText = '修改 >>';
	}
}



function search_btn(btn) {//查找
	var elm = document.getElementById('serach_div');
	if(btn.innerText == '查找 >>') {
		elm.style.display = '';
		btn.innerText = '查找 <<';
	} else {
		elm.style.display = 'none';
		btn.innerText = '查找 >>';
	}
}



</script>

ThatMonth

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript面对对象-学生信息管理系统

<body> <center> <h1>学生信息管理系统</h1><hr> <button onclick="add_btn(this)">增加 >> </button> <button onclick="Delete(this)">删除 >> </button> <button onclick="change_btn(this)">修改 &..
复制链接

扫一扫