zoukankan html css js c++ java

实验C JavaScript DOM操作XML显示查询添加删除

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>JavaScript DOM操作XML显示查询添加删除</title>
	<style type="text/css">
	.style1
	{
	font-size: xx-large;
	}
	.style2
	{
	100%;
	}
	.style3
	{
	257px;
	}
	.style4
	{
	257px;
	height: 21px;
	}
	.style6
	{
	height: 21px;
	}
	.style7
	{
	257px;
	height: 23px;
	}
	.style8
	{
	height: 23px;
	}
	#Query
	{
	height: 21px;
	68px;
	}
	</style>
	<script language="javascript" type="text/javascript">


	var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
	xmlDoc.async = false;
	xmlDoc.load("student.xml");

	function ShowAll_onclick() {
	ShowAllStudent();
	}
	function ShowAllStudent() {
	var root = xmlDoc.documentElement;
	var firstNode = root.childNodes[0];
	var content = firstNode.text + "<br>";
	var nextNode = firstNode.nextSibling;
	while (nextNode != null) {
	content += nextNode.text + "<br>";
	nextNode = nextNode.nextSibling;
	}
	var showAllDiv = document.getElementById("divShow");
	showAllDiv.style.dispaly = "block";
	showAllDiv.innerHTML = content;

	}
	function Query_onclick() {
	var userInput = document.getElementById("StudentID");
	if (userInput.value == "") {
	alert("请输入学生学号！");
	return;
	}
	var result = "";
	oList = xmlDoc.documentElement.childNodes;
	for (var i = 0; i < oList.length; i++) {
	var node = xmlDoc.documentElement.childNodes[i];
	if (userInput.value == node.childNodes[0].text) {
	result = node.text;
	document.getElementById("StudentName").value = node.childNodes[1].text;
	document.getElementById("Gender").value = node.childNodes[2].text;
	document.getElementById("Special").value = node.childNodes[3].text;
	document.getElementById("Math").value = node.childNodes[4].text;
	document.getElementById("English").value = node.childNodes[5].text;
	break;
	}
	}
	if (result != "") {
	alert("查询结果是：" + result);
	}
	else {
	document.getElementById("StudentName").value = "";
	document.getElementById("Gender").value = "";
	document.getElementById("Special").value = "";
	document.getElementById("Math").value = "";
	document.getElementById("English").value = "";
	alert("未找到符合条件的同学！");
	}
	}

	function showAllStudentName() {
	var content = "";
	var root = xmlDoc.documentElement;
	var studentList = root.getElementsByTagName("姓名");
	alert("学生人数（姓名个数）是：" + studentList.length);
	for (var i = 0; i < studentList.length; i++) {
	content += studentList[i].text + "<br>";
	}
	var showAllDiv = document.getElementById("divShow");
	showAllDiv.style.display = "block";
	showAllDiv.innerHTML = content;
	}
	function ShowName_onclick() {
	showAllStudentName();
	}

	function ShowAttribute_onclick() {
	var content = "";
	var root = xmlDoc.documentElement;
	var studentList = root.getElementsByTagName("姓名");
	for (var i = 0; i < studentList.length; i++) {
	var hobby = studentList[i].getAttribute("爱好");
	if (hobby != null)
	content += studentList[i].text + "的爱好是：" + hobby + "<br/>";
	}
	if (content == "") {
	alert("未能找到任何“爱好”信息！");
	return;
	}
	var showAllDiv = document.getElementById("divShow");
	showAllDiv.style.display = "block";
	showAllDiv.innerHTML = content;
	}


	function Add_onclick() {
	if (document.getElementById("StudentID").value == "") {
	alert("请输入学号！");
	return;
	}
	if (document.getElementById("StudentName").value == "") {
	alert("请输入姓名！");
	return;
	}
	if (document.getElementById("Gender").value == "") {
	alert("请输入性别！");
	return;
	}
	if (document.getElementById("Special").value == "") {
	alert("请输入专业！");
	return;
	}
	if (document.getElementById("Math").value == "") {
	alert("请输入数学成绩！");
	return;
	}
	if (document.getElementById("English").value == "") {
	alert("请输入英语成绩！");
	return;
	}
	oList = xmlDoc.documentElement.childNodes;
	var userInput=document.getElementById("StudentID")
	for (var i = 0; i < oList.length; i++) {
	var node = xmlDoc.documentElement.childNodes[i];
	if (userInput.value == node.childNodes[0].text) {
	var temp = confirm("该同学的信息已经存在确认更新吗");
	if (temp == true) {
	node.childNodes[1].text = document.getElementById("StudentName").value;
	node.childNodes[2].text = document.getElementById("Gender").value;
	node.childNodes[3].text = document.getElementById("Special").value;
	node.childNodes[4].text = document.getElementById("Math").value;
	node.childNodes[5].text = document.getElementById("English").value;
	var content = "";
	var nodesList = xmlDoc.documentElement.childNodes;
	alert("已成功添加一位新同学，现在学生人数是：" + nodesList.length);
	for (var i = 0; i < nodesList.length; i++) {
	content += nodesList[i].text + "<br/>";
	}
	var showAllDiv = document.getElementById("divShow");
	showAllDiv.style.display = "block";
	showAllDiv.innerHTML = content;
	return;
	}
	else
	return;
	}
	}
	var root = xmlDoc.documentElement;
	var student = xmlDoc.createElement("学生");
	var child1 = xmlDoc.createElement("学号");
	child1.text = document.getElementById("StudentID").value;
	student.appendChild(child1);
	var child2 = xmlDoc.createElement("姓名");
	child2.text = document.getElementById("StudentName").value;
	student.appendChild(child2);
	var child3 = xmlDoc.createElement("姓别");
	child3.text = document.getElementById("Gender").value;
	student.appendChild(child3);
	var child4 = xmlDoc.createElement("专业");
	child4.text = document.getElementById("Special").value;
	student.appendChild(child4);
	var child5 = xmlDoc.createElement("数学");
	child5.text = document.getElementById("Math").value;
	student.appendChild(child5);
	var child6 = xmlDoc.createElement("英语");
	child6.text = document.getElementById("English").value;
	student.appendChild(child6);
	root.appendChild(student);
	var content = "";
	var nodesList = xmlDoc.documentElement.childNodes;
	alert("已成功添加一位新同学，现在学生人数是：" + nodesList.length);
	for (var i = 0; i < nodesList.length; i++) {
	content += nodesList[i].text + "<br/>";
	}
	var showAllDiv = document.getElementById("divShow");
	showAllDiv.style.display = "block";
	showAllDiv. innerHTML = content;
	}

	function Delete_onclick() {

	var userInputTextBox = document.getElementById("StudentID");
	var userInputID = userInputTextBox.value;
	if (userInputID == "") {
	alert("请输入学生学号！");
	return;
	}
	var root = xmlDoc.documentElement;
	var stu = xmlDoc.selectSingleNode("学生名单/学生/学号[text()='" + userInputID + "']");
	if (stu == null) {
	alert("未找到学号为“" + userInputID + "”的同学！");
	return;
	}
	var stuNode = stu.parentNode;
	root.removeChild(stuNode);
	document.getElementById("StudentName").value = "";
	document.getElementById("Gender").value = "";
	document.getElementById("Special").value = "";
	document.getElementById("Math").value = "";
	document.getElementById("English").value = "";
	alert("您已成功删除了学号为“" + userInputID + "”的同学！");
	ShowAllStudent();
	}

	</script>
	</head>
	<body>

	<br/>
	<strong><span style="font-size:16pt">实验C  JavaScript DOM操作XML显示查询添加删除</span></strong>
	<br/><br/>
	<div style="z-index:102;left:25px;550px;position:absolute;top:55px;height:60px">

	<table style="550px;">
	<tr>
	<td align="right" >请输入学号：</td>
	<td>
	<input id="StudentID" type="text" /></td>
	<td>
	<input id="ShowAll" type="button" value="全部显示"
	onclick="return ShowAll_onclick()" /></td>
	<td>
	<input id="ShowName" type="button" value="显示姓名"
	onclick="return ShowName_onclick()" /></td>
	<td>
	<input id="ShowAttribute" type="button" value="显示属性" onclick="return ShowAttribute_onclick()" /></td>
	</tr>
	<tr>
	<td align="right">姓名：</td><td><input id="StudentName" type="text" /></td><td colspan="3"></td>
	</tr>
	<tr>
	<td align="right" >性别：</td><td><input id="Gender" type="text" /></td><td colspan="3"></td>
	</tr>

	<tr>
	<td align="right">专业：</td><td><input id="Special" type="text" /></td><td colspan="3"></td>
	</tr>

	<tr>
	<td align="right" >数学：</td><td><input id="Math" type="text" /></td><td colspan="3"></td>

	</tr>
	<tr>
	<td align="right">英语：</td><td><input id="English" type="text" /></td><td colspan="3"></td>
	</tr>
	<tr>
	<td align="right">

	<input id="Query" type="button" value="查询" onclick="return Query_onclick()" /></td>
	<td>

	<input id="Add" type="button" value="添加" onclick="return Add_onclick()" />
	<input id="Delete" type="button" value="删除" onclick="return Delete_onclick()" /></td><td colspan="3"></td>

	</tr>
	</table>
	</div>

	<div id="divShow" style="z-index:1;left:366px;top:100px;position:absolute;background-color:#FFFF00;display:none;" >
	</div>



	</body>
	</html>

查看全文

相关阅读:
20189207《网络攻防实践》第一周作业
 事件冒泡
 链接分类
 JS：offsetWidth\offsetleft
JS alert()、confirm()、prompt()的区别
 this用法
 事件绑定
 clippath
浅谈正则
 C++大师Lippman：我对中国程序员的忠告（转载）

原文地址：https://www.cnblogs.com/iris-yx/p/3504278.html

最新文章
14、vuecli脚手架搭建项目
 3、npm start报错：./node_modules/history/esm/history.js解决办法
 9、底部导航添加图标和选中颜色
 4、map,forEach,every，some,filter的区别
 12、微信小程序实现授权
 13、vue如何解决跨域问题
 2、antd pro 删除eslint检测
 5、react中父子组件间如何传值
 23、日期格式化
 19、localStorage.getItem得到的是[object Object] 的解决方案