| |
<!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 |
| |
{ |
| |
width: 100%; |
| |
} |
| |
.style3 |
| |
{ |
| |
width: 257px; |
| |
} |
| |
.style4 |
| |
{ |
| |
width: 257px; |
| |
height: 21px; |
| |
} |
| |
.style6 |
| |
{ |
| |
height: 21px; |
| |
} |
| |
.style7 |
| |
{ |
| |
width: 257px; |
| |
height: 23px; |
| |
} |
| |
.style8 |
| |
{ |
| |
height: 23px; |
| |
} |
| |
#Query |
| |
{ |
| |
height: 21px; |
| |
width: 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;width:550px;position:absolute;top:55px;height:60px"> |
| |
|
| |
<table style="width: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> |
| |
