<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>
<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= ' Visible ';
document.getElementById ("S"). value= "hidden Student Information";
}else{
document.getElementById (' info '). style.visibility= ' hidden ';
document.getElementById ("S"). Value= "Display student Information";
}
}
Find
Function Que () {
document.getElementById ("ad"). style.visibility= "Visible";
document.getElementById ("QMD"). style.visibility= "Visible";
}
/**
* Parsing XML file functions
* @param xmldoc XML objects
* @param Name property names format such as: User.Name
*/
function Getxmlproperty (xmldoc, name) {
var keys = name.split ('. ');
var node = xmldoc.documentelement;
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 "";
}
Returns the parent node (through node name and node value)
function Getnod (nam,val) {
var node = xmldoc.documentelement;
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 to child;
}
}
}
Return ";
}
Return child node values through parent node and sub-section names
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 child nodes through parent node and sub-section names
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 find
function query () {
var renum =/^\d{5}$/;
if (Renum.exec (Xh.value)) {
if (Xmldoc.selectsinglenode ("/student management [student/Learner number =" +xh.value+ "]) {
var nod = Getnod (' School Number ', Xh.value);
Getnodval (nod, ' name ');
Getnodval (nod, ' gender ');
Getnodval (nod, ' native Place ');
/*document.getelementbyid ("XM"). Value=xmldoc.selectsinglenode ("/student management [student/Learner id =" +xh.value+ "]). selectSingleNode (" Student/Name "). Text;
document.getElementById ("XB"). Value=xmldoc.selectsinglenode ("/student management [student/Learner id =" +xh.value+ "]). selectSingleNode (" Student/ Gender "). Text;
document.getElementById ("JG"). Value=xmldoc.selectsinglenode ("/student management [student/School Number =" +xh.value+ "]). selectSingleNode (" Student/ Origin "). 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, ' native Place ');
}else{
Alert ("The school number is not yet occupied!");
}
}else{
Alert ("Illegal learning number 5 digits!");
return false;
}
}
Modify
function mod () {
if (Info_check ()) {
if (Xmldoc.selectsinglenode ("/student management [student/Learner number =" +xh.value+ "]) {
if (confirm) (Confirm the modification?) ")){
var nod = Getnod (' School Number ', Xh.value);
Getcurnod (nod, ' name '). Text=xm.value;
Getcurnod (nod, ' Gender '). Text=xb.value;
Getcurnod (nod, ' native Place '). Text=jg.value;
/*
Xmldoc.selectsinglenode ("/student management [student/School Number =" +xh.value+ "]"). selectSingleNode ("Student/Name"). Text=xm.value;
Xmldoc.selectsinglenode ("/student management [student/School Number =" +xh.value+ "]"). selectSingleNode ("Student/Gender"). Text=xb.value;
Xmldoc.selectsinglenode ("/student management [student/School Number =" +xh.value+ "]"). selectSingleNode ("Student/place of origin"). 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 ("Modify success!");
Location.reload ();
}
}else{
Alert ("The school number is not yet occupied!");
return false;
}
}
}
New students
function Add () {
var vadd = document.getElementById ("Add"). Value;
if (vadd== "new") {
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= ' hidden ';
document.getElementById ("S"). Value= "Display 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 ("New success!");
Location.reload ();
}
}
}
Delete Student
Function del () {
var renum =/^\d{5}$/;
if (Renum.exec (document.getElementById ("XH"). Value) {
if (Xmldoc.selectsinglenode ("/student management [student/Learner number =" +xh.value+ "]) {
if (confirm) (Confirm deletion?) ")){
/*var node = Xmldoc.selectsinglenode ("/student management [student/Learner number =" +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 (' School Number ', Xh.value);
Nod.parentNode.removeChild (NOD);
SaveXML ();
Can ();
Alert ("Delete succeeded!");
Location.reload ();
}
}else{
Alert ("The school number is not yet occupied!");
return false;
}
}else{
Alert ("The school number is illegal! for 5 digits!");
return false;
}
}
Cancel New
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";
}
Increase the node.
function Add_node () {
var oxh = xmldoc.createelement ("school Number");
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 ("Native Place");
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 XML
function SaveXML () {
Xmldoc.save ("Stu.xml");
}
Verifying new data
function Info_check () {
var renum =/^\d{5}$/;
var rec =/^[\u4e00-\u9fa5]{2,5}$/;
if (!renum.exec (document.getElementById ("XH"). Value) {
Alert ("The school number is illegal! for 5 digits!");
return false;
}
if (!rec.exec (Xm.value)) {
Alert ("Name is illegal!) can only be Chinese at least two words, up to no more than 5 words!"
return false;
}
Alert (xb.value!= "male");
Switch (xb.value) {
Case "male": break;
Case "female": break;
Default:alert ("Sex can only be" male \ "or" female "!"); return false;
}
if (!rec.exec (Jg.value)) {
Alert ("Illegal hometown!") can only be Chinese at least two words, up to no more than 5 words!! ");
return false;
}
return true;
}
-->
</SCRIPT>
<input id= "s" Type=button value= "displays student information" onclick= "Show ();" >
<input id= "que" type=button value= "exact query 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> School Number:
<input type=text id= "XH" style= "ime-mode:disabled" size=5 maxlength=5 "if" (onkeypress= | | event.keycode>57) event.returnvalue=false "><!--style for a closed input method onKeyPress can only enter a number-->
</td><td> Name:
<input type=text id= "XM" size=10 maxlength=5>
</td><td> Sex:
<input type=text id= "XB" size=5 maxlength=5>
</td><td> Origin:
<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=" queries (); " ></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= "value=" "a" id= "key" onkeydown= "Javascript:chcksubmit (event);" >
<input type= "button" value= "Find" 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 Object location
FindPanel.style.pixelLeft = Document.body.scrollLeft + Findpanel_orgnx;
FindPanel.style.pixelTop = Document.body.scrollTop + Findpanel_orgny;
//================================================================================
var foundcnt = 0; The number of results that have been found
Lookup entry function
function Find (Key)
{
if (key = = "")
{
Return
}
if (document.all)
{
Iefind (key);
}
Else
{
Nsfind (key);
}
}
Browser for 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); Find, and move one back to find the next
}
if (found)
{
Rng.movestart ("character",-1);
Rng.findtext (key);
Rng.select ();
Rng.scrollintoview ();
foundcnt++;
}
Else
{
if (foundcnt > 0)
{
I've looked it over, found a match, and started looking again.
foundcnt = 0;
Iefind (key);
}
Else
{
I've looked it up again, and I didn't find a match.
Alert ("Document search complete.") ");
}
}
}
Browser for NS series
function Nsfind (key)
{
if (Window.find (key))
{
foundcnt++;
}
Else
{
var found = false;
while (Window.find (key, False, True))
{
Found = true;
}
if (found)
{
I've looked it up, I've found a match, and I've been looking again.
foundcnt = 1;
}
Else
{
I've looked it up again, and I didn't find a match.
Alert ("Document search complete.") ");
}
}
}
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 in drag-and-drop process
var draging = false; Is it in the drag
var OffsetX = 0; X direction left and right offset
var OffsetY = 0; Y-direction up and down offsets
Ready 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;
}
Drag in
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 drag
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> School Number </th>
<th> name </th>
<th> Sex </th>
<th> Hometown </th>
</thead>
<tr>
<td>
<div datafld= "School Number" >
</td>
<td>
<div datafld= "Name" >
</td>
<td>
<div datafld= "Gender" >
</td>
<td>
<div datafld= "Native Place" >
</td>
</tr>
</table>
</div>
</center>
</body>
