Including stu. hta (HTML application );
Stu. xml
Note that the following HTML code must be saved with the suffix hta. Otherwise, when you perform operations on the XML file (add, delete, modify, and delete), the system will prompt that you do not have the permission !!
FileStu. htaThe Code is as follows:
Copy codeThe Code is as follows: <Head>
<Title> data island display </title>
<Style type = "text/css">
# FindPanel
{
Position: absolute;
Width: 220px;
Border: 1px solid #666666;
}
# FindPanelTitle
{
Height: 10px;
Background-color: #336699;
Cursor: move;
}
# FindPanelContent
{
Padding: 5px 5px 5px 5px;
Background-color: # 6699CC;
}
</Style>
</Head>
<Body>
<Script language = "JavaScript">
<! --
Var xmlDoc = new ActiveXObject ("Msxml2.DOMDocument ");
XmlDoc. async = false;
XmlDoc. resolveExternals = false;
XmlDoc. load ("stu. xml ");
// Alert (xmlDoc. xml );
// Display data
Function show (){
Var vbo = document. getElementById ("s"). value;
If (vbo = "show student information "){
Document. getElementById ('info'). style. visibility = 'visable ';
Document. getElementById ("s"). value = "Hide student information ";
} Else {
Document. getElementById ('info'). style. visibility = 'den den ';
Document. getElementById ("s"). value = "show student information ";
}
}
// Search
Function que (){
Document. getElementById ("ad"). style. visibility = "visible ";
Document. getElementById ("qmd"). style. visibility = "visible ";
}
/**
* XML file parsing function
* @ Param xmlDoc XML Object
* @ Param name the format of the attribute name is as follows: user. name
*/
Function getXMLProperty (xmlDoc, name ){
Var keys = name. split ('.');
Var node = xmlDoc.doc umentElement;
For (var I = 0; I <keys. length; I ++ ){
Var childs = node. childNodes;
Var key = keys [I];
For (var k = 0; k <childs. length; k ++ ){
Var child = childs [k];
If (child. nodeName = key ){
If (child. childNodes. length = 1 ){
Return child. text;
} Else {
Node = child;
Break;
}
}
}
}
Return "";
}
// Return the parent node (by node name and node value)
Function getNod (nam, val ){
Var node = xmlDoc.doc umentElement;
Var childs = node. childNodes;
For (var I = 0; I <childs. length; I ++)
{
Var child = childs [I];
Var childms = child. childNodes;
For (var k = 0; k <childms. length; k ++ ){
Var childm = childms [k];
If (childm. nodeName = nam & (childm. text). substring (0, 6) = val ){
// Alert (val );
Return child;
}
}
}
Return '';
}
// Return the value of the child node through the parent node and the child node name
Function getNodVal (nods, nam ){
Var childms = nods. childNodes;
For (var k = 0; k <childms. length; k ++ ){
Var childm = childms [k];
If (childm. nodeName = nam ){
// Alert (childm. text );
Return childm. text;
}
}
Return '';
}
// Return the child node through the parent node and child node name
Function getCurNod (nods, nam ){
Var childms = nods. childNodes;
For (var k = 0; k <childms. length; k ++ ){
Var childm = childms [k];
If (childm. nodeName = nam ){
// Alert (childm. text );
Return childm;
}
}
Return '';
}
// Start searching
Function query (){
Var renum =/^ \ d {5} $ /;
If(renum.exe c (xh. value )){
If (xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]") {
Var nod = getNod ('student ID ', xh. value );
// GetNodVal (nod, 'name ');
// GetNodVal (nod, 'gender ');
// GetNodVal (nod, 'hometown ');
/* Document. getElementById ("xm "). value = xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]"). selectSingleNode ("student/Name "). text;
Document. getElementById ("xb "). value = xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]"). selectSingleNode ("student/Gender "). text;
Document. getElementById ("jg "). value = xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]"). selectSingleNode ("student/nationality "). text;
Document. getElementById ("xh"). disabled = "true ";*/
Document. getElementById ("xm"). value = getNodVal (nod, 'name ');
Document. getElementById ("xb"). value = getNodVal (nod, 'Gender ');
Document. getElementById ("jg"). value = getNodVal (nod, 'original ');
} Else {
Alert ("this student ID is not in use! ");
}
} Else {
Alert ("student ID is invalid! Student ID: 5 digits! ");
Return false;
}
}
// Modify
Function mod (){
If (info_check ()){
If (xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]") {
If (confirm ("are you sure you want to modify? ")){
Var nod = getNod ('student ID ', xh. value );
GetCurNod (nod, 'name'). text = xm. value;
GetCurNod (nod, 'Gender '). text = xb. value;
GetCurNod (nod, 'original'). text = jg. value;
/*
XmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]"). selectSingleNode ("student/Name"). text = xm. value;
XmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]"). selectSingleNode ("student/Gender"). text = xb. value;
XmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]"). selectSingleNode ("student/nationality"). text = jg. value;
*/
SaveXML ();
// Document. getElementById ("xh"). disabled = "false ";
Document. getElementById ("xh"). value = "";
Document. getElementById ("xm"). value = "";
Document. getElementById ("xb"). value = "";
Document. getElementById ("jg"). value = "";
Document. getElementById ("ad"). style. visibility = "hidden ";
Document. getElementById ("qmd"). style. visibility = "hidden ";
Alert ("modified successfully! ");
Location. reload ();
}
} Else {
Alert ("this student ID is not in use! Please follow the student ID to query and modify it! ");
Return false;
}
}
}
// New student
Function add (){
Var vadd = document. getElementById ("add"). value;
If (vadd = "add "){
Document. getElementById ("xh"). value = "";
Document. getElementById ("xm"). value = "";
Document. getElementById ("xb"). value = "";
Document. getElementById ("jg"). value = "";
Document. getElementById ("qmd"). style. visibility = "hidden ";
Document. getElementById ('info'). style. visibility = 'den den ';
Document. getElementById ("s"). value = "show student information ";
Document. getElementById ("ad"). style. visibility = "visible ";
Document. getElementById ("add"). value = "save ";
Document. getElementById ("can"). style. visibility = "visible ";
} Else {
If (info_check ()){
Add_node ();
SaveXML ();
Document. getElementById ("xh"). value = "";
Document. getElementById ("xm"). value = "";
Document. getElementById ("xb"). value = "";
Document. getElementById ("jg"). value = "";
Document. getElementById ("ad"). style. visibility = "hidden ";
Document. getElementById ("qmd"). style. visibility = "hidden ";
Document. getElementById ("add"). value = "add ";
Alert ("added successfully! ");
Location. reload ();
}
}
}
// Delete student
Function del (){
Var renum =/^ \ d {5} $ /;
If(renum.exe c (document. getElementById ("xh"). value )){
If (xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]") {
If (confirm ("are you sure you want to delete? ")){
/* Var node = xmlDoc. selectSingleNode ("/Student Management [student/student ID =" + xh. value + "]");
If (node. hasChildNodes ()){
Var kids = node. childNodes;
For (var I = 0; I <kids. length; I ++ ){
Del ();
}
}
Node. parentNode. removeChild (node );
*/
Var nod = getNod ('student ID ', xh. value );
Nod. parentNode. removeChild (nod );
SaveXML ();
Can ();
Alert ("deleted successfully! ");
Location. reload ();
}
} Else {
Alert ("this student ID is not in use! Please follow the student ID to query and modify it! ");
Return false;
}
} Else {
Alert ("student ID is invalid! It is a five-digit number! ");
Return false;
}
}
// Cancel adding
Function can (){
Document. getElementById ("xh"). value = "";
Document. getElementById ("xm"). value = "";
Document. getElementById ("xb"). value = "";
Document. getElementById ("jg"). value = "";
Document. getElementById ("ad"). style. visibility = "hidden ";
Document. getElementById ("can"). style. visibility = "hidden ";
Document. getElementById ("qmd"). style. visibility = "hidden ";
Document. getElementById ("add"). value = "add ";
}
// Add a node
Function add_node (){
Var oxh = xmlDoc. createElement ("student ID ");
Oxh. appendChild (xmlDoc. createTextNode (xh. value ));
Var oxm = xmlDoc. createElement ("name ");
Oxm. appendChild (xmlDoc. createTextNode (xm. value ));
Var oxb = xmlDoc. createElement ("gender ");
Oxb. appendChild (xmlDoc. createTextNode (xb. value ));
Var ojg = xmlDoc. createElement (" ");
Ojg. appendChild (xmlDoc. createTextNode (jg. value ));
Var oxs = xmlDoc. createElement ("student ");
Oxs. appendChild (oxh );
Oxs. appendChild (oxm );
Oxs. appendChild (oxb );
Oxs. appendChild (ojg );
Var parent = xmlDoc. selectSingleNode ("/Student Management ");
If (parent. hasChildNodes ()){
Parent. insertBefore (oxs, parent. firstChild );
} Else {
Parent. appendChild (oxs );
}
}
// Save the XML
Function saveXML (){
XmlDoc. save ("stu. xml ");
}
// Verify the new data
Function info_check (){
Var renum =/^ \ d {5} $ /;
Var rec =/^ [\ u4E00-\ u9FA5] {2, 5} $ /;
If (! Renum.exe c (document. getElementById ("xh"). value )){
Alert ("student ID is invalid! It is a five-digit number! ");
Return false;
}
If (! Rec.exe c (xm. value )){
Alert ("invalid name! It can only contain at least two Chinese characters and a maximum of five Chinese characters! ");
Return false;
}
// Alert (xb. value! = "Male ");
Switch (xb. value ){
Case "male": break;
Case "female": break;
Default: alert ("gender can only be \" male \ "or \" female \"! "); Return false;
}
If (! Rec.exe c (jg. value )){
Alert ("illegal nationality! It can only contain at least two Chinese characters and at most five Chinese characters !! ");
Return false;
}
Return true;
}
// -->
</SCRIPT>
<Input id = "s" type = button value = "show student information" onclick = "show ();">
<Input id = "que" type = button value = "exact search" onclick = "que ();">
<Input id = "add" type = button value = "add" onclick = "add ();">
<Input id = "can" type = button value = "cancel" onclick = "can ();" style = "visibility: hidden">
<Br>
<Center>
<Div id = "ad" style = "visibility: hidden">
<Table> <tr> <td> Student ID:
<Input type = text id = "xh" style = "ime-mode: disabled" size = 5 maxlength = 5 onKeyPress = "if (event. keyCode <48 | event. keyCode> 57) event. returnValue = false "> <! -- Style is used for the optical closed Input Method onKeyPress. Only numbers can be entered -->
</Td> <td> Name:
<Input type = text id = "xm" size = 10 maxlength = 5>
</Td> <td> gender:
<Input type = text id = "xb" size = 5 maxlength = 5>
</Td> <td> nationality:
<Input type = text id = "jg" size = 10 maxlength = 5>
</Td>
</Tr>
</Table>
</Div>
<Div id = "qmd" style = "visibility: hidden">
<Table>
<Tr align = "center">
<Td> </td>
<Td> <input id = "que" type = button value = "query" onclick = "query ();"> </td>
<Td> <input id = "mod" type = button value = "modify" onclick = "mod ();"> </td>
<Td> <input id = "del" type = button value = "delete" onclick = "del ();"> </td>
</Tr>
</Table>
</Div>
</Center>
<Div id = "findPanel">
<Div id = "findPanelTitle"> drag </div>
<Div id = "findPanelContent">
<Input type = "text" size = "20" value = "a" id = "key" onkeydown = "javascript: ChckSubmit (event);">
<Input type = "button" value = "Search" onclick = "javascript: OnKeySubmit ();">
</Div>
</Div>
<Script language = "javascript">
<! --
Var findPanel = document. getElementById ("findPanel ");
Var findPanelTitle = document. getElementById ("findPanelTitle ");
Var findPanelContent = document. getElementById ("findPanelContent ");
Var findPanel_orgnX = 50;
Var findPanel_orgnY = 50;
// Set the Object Location
FindPanel. style. pixelLeft = document. body. scrollLeft + findPanel_orgnX;
FindPanel. style. pixelTop = document. body. scrollTop + findPanel_orgnY;
// ================================================ ========================================================== =
Var foundCnt = 0; // number of results found
// Search for the entry function
Function Find (key)
{
If (key = "")
{
Return;
}
If (document. all)
{
IEFind (key );
}
Else
{
NSFind (key );
}
}
// The browser is an IE Series
Function IEFind (key)
{
Var rng = document. body. createTextRange ();
Var found = false;
For (var I = 0; I <= foundCnt & (found = rng. findText (key); I ++)
{
Rng. moveStart ("character", 1); // locate, move one to the next
}
If (found)
{
Rng. moveStart ("character",-1 );
Rng. findText (key );
Rng. select ();
Rng. scrollIntoView ();
FoundCnt ++;
}
Else
{
If (foundCnt> 0)
{
// Search again. Find the matching result and start searching again.
FoundCnt = 0;
IEFind (key );
}
Else
{
// No matching results have been found.
Alert ("the document has been searched. ");
}
}
}
// Browser: NS Series
Function NSFind (key)
{
If (window. find (key ))
{
FoundCnt ++;
}
Else
{
Var found = false;
While (window. find (key, false, true ))
{
Found = true;
}
If (found)
{
// Search again, find the result that meets the condition, and search again.
FoundCnt = 1;
}
Else
{
// No matching results have been found.
Alert ("the document has been searched. ");
}
}
}
Function OnKeySubmit ()
{
Var key = document. getElementById ("key ");
Find (key. value );
}
Function ChckSubmit (e)
{
If (e. keyCode = 13)
{
OnKeySubmit ();
}
}
// ================================================ ========================================================== =
Function RePosFindPanel ()
{
FindPanel. style. pixelLeft = document. body. scrollLeft + findPanel_orgnX;
FindPanel. style. pixelTop = document. body. scrollTop + findPanel_orgnY;
}
Document. body. onscroll = RePosFindPanel;
Document. body. onresize = RePosFindPanel;
// ================================================ ========================================================== =
// Related variables during dragging
Var draging = false; // indicates whether the image is being dragged.
Var offsetX = 0; // The offset between the left and right directions of X
Var offsetY = 0; // up/down offset in the Y direction
// Prepare to drag
Function BeforeDrag ()
{
If (event. button! = 1)
{
Return;
}
OffsetX = document. body. scrollLeft + event. clientX-findPanel.style.pixelLeft;
OffsetY = document. body. scrollTop + event. clientY-findPanel.style.pixelTop;
Draging = true;
}
// Dragging
Function OnDrag ()
{
If (! Draging)
{
Return;
}
// Update location
FindPanel_orgnX = event. clientX-offsetX;
FindPanel_orgnY = event. clientY-offsetY;
Event. returnValue = false;
FindPanel. style. pixelLeft = document. body. scrollLeft + event. clientX-offsetX;
FindPanel. style. pixelTop = document. body. scrollTop + event. clientY-offsetY;
}
// End dragging
Function EndDrag ()
{
If (event. button! = 1)
{
Return;
}
Draging = false;
}
FindPanelTitle. onmousedown = BeforeDrag;
Document. onmousemove = OnDrag;
FindPanelTitle. onmouseup = EndDrag;
// -->
</Script>
<Xml id = "stu" src = "stu. xml">
</Xml>
<Center>
<Div id = "info" style = "visibility: hidden">
<Table DATASRC = # stu border = 1 style = "background-color: # a9eeef; Border-color
: Red; ">
<Caption> <Thead>
<Th> Student ID </th>
<Th> name </th>
<Th> gender </th>
<Th> nationality </th>
</Thead>
<Tr>
<Td>
<Div dataworkflow = "student ID">
</Td>
<Td>
<Div dataworks = "name">
</Td>
<Td>
<Div dataworks = "gender">
</Td>
<Td>
<Div dataworks = "nationality">
</Td>
</Tr>
</Table>
</Div>
</Center>
</Body>
</Html>
The xml file is as follows (stu. xml)Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "gb2312"?>
<Student Management>
<Student>
<Student ID> 97001 </student ID>
<Name> Wang Wu </Name>
<Gender> male </gender>
<Nationality> Shanghai </nationality>
</Student>
<Student>
<Student ID> 97002 </student ID>
<Name> Li Si </Name>
<Gender> male </gender>
<Nationality> Zhejiang </nationality>
</Student>
<Student>
<Student ID> 97006 </student ID>
<Name> Zhang San </Name>
<Gender> male </gender>
<Nationality> Zhejiang </nationality>
</Student>
</Student Management>
