javascript操作xml(增刪改查)例子代碼

自己做了一個小東西，不是很好，但是對初學來說是一個不錯的例子!

包括了stu.hta(是HTML應用程序);
stu.xml
注意下面的HTML代碼必須保存爲後綴名爲hta否則當對XML文件進行操作(增刪改)的時候就會提示沒有權限!!

文件stu.hta代碼如下:

Java代碼

<html>
<head>
<title> 數據島的顯示　</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);
//顯示數據
function show(){
var vbo = document.getElementById("s").value;
if(vbo=="顯示學生信息"){
document.getElementById('info').style.visibility='visible';
document.getElementById("s").value="隱藏學生信息";
}else{
document.getElementById('info').style.visibility='hidden';
document.getElementById("s").value="顯示學生信息";
}
}
//查找
function que(){
document.getElementById("ad").style.visibility="visible";
document.getElementById("qmd").style.visibility="visible";
}
/**
* 解析XML文件函數
* @param xmlDoc XML對象
* @param name 屬性名稱格式如: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 "";
}
//返回父節點(通過節點名字和節點值)
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 child;
}
}
}
return '';
}
//通過父節點和子節點名返回子節點值
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 '';
}
//通過父節點和子節點名返回子節點
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 '';
}
//開始查找
function query(){
var renum = /^/d{5}$/;
if(renum.exec(xh.value)){
if(xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]")){
var nod = getNod('學號',xh.value);
//getNodVal(nod,'姓名');
//getNodVal(nod,'性別');
//getNodVal(nod,'籍貫');
/*document.getElementById("xm").value=xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/姓名").text;
document.getElementById("xb").value=xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/性別").text;
document.getElementById("jg").value=xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/籍貫").text;
document.getElementById("xh").disabled="true"; */
document.getElementById("xm").value=getNodVal(nod,'姓名');
document.getElementById("xb").value= getNodVal(nod,'性別');
document.getElementById("jg").value= getNodVal(nod,'籍貫');
}else{
alert("該學號還沒有被佔用!");
}
}else{
alert("學號非法!學號5位數字!");
return false;
}
}
//修改
function mod(){
if(info_check()){
if(xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]")){
if(confirm("確認修改？")){
var nod = getNod('學號',xh.value);
getCurNod(nod,'姓名').text=xm.value;
getCurNod(nod,'性別').text=xb.value;
getCurNod(nod,'籍貫').text=jg.value;
/*
xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/姓名").text=xm.value;
xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/性別").text=xb.value;
xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/籍貫").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("修改成功!");
location.reload();
}
}else{
alert("該學號還沒有被佔用!請按學號查詢再進行修改!");
return false;
}
}
}
//新增學生
function add(){
var vadd = document.getElementById("add").value;
if(vadd=="新增"){
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="顯示學生信息";
document.getElementById("ad").style.visibility="visible";
document.getElementById("add").value="保存";
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="新增";
alert("新增成功!");
location.reload();
}
}
}
//刪除學生
function del(){
var renum = /^/d{5}$/;
if(renum.exec(document.getElementById("xh").value)){
if(xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]")){
if(confirm("確認刪除？")){
/*var node = xmlDoc.selectSingleNode("/學生管理[學生/學號="+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('學號',xh.value);
nod.parentNode.removeChild(nod);
saveXML();
can();
alert("刪除成功!");
location.reload();
}
}else{
alert("該學號還沒有被佔用!請按學號查詢再進行修改!");
return false;
}
}else{
alert("學號非法!爲5位數字!");
return false;
}
}
//取消新增
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="新增";
}
//增加結點
function add_node(){
var oxh = xmlDoc.createElement("學號");
oxh.appendChild(xmlDoc.createTextNode(xh.value));
var oxm = xmlDoc.createElement("姓名");
oxm.appendChild(xmlDoc.createTextNode(xm.value));
var oxb = xmlDoc.createElement("性別");
oxb.appendChild(xmlDoc.createTextNode(xb.value));
var ojg = xmlDoc.createElement("籍貫");
ojg.appendChild(xmlDoc.createTextNode(jg.value));
var oxs = xmlDoc.createElement("學生");
oxs.appendChild(oxh);
oxs.appendChild(oxm);
oxs.appendChild(oxb);
oxs.appendChild(ojg);
var parent = xmlDoc.selectSingleNode("/學生管理");
if(parent.hasChildNodes()) {
parent.insertBefore(oxs,parent.firstChild);
}else{
parent.appendChild(oxs);
}
}
//保存XML
function saveXML(){
xmlDoc.save("stu.xml");
}
//驗證新增數據
function info_check(){
var renum = /^/d{5}$/;
var rec = /^[/u4E00-/u9FA5]{2,5}$/;
if(!renum.exec(document.getElementById("xh").value)){
alert("學號非法!爲5位數字!");
return false;
}
if(!rec.exec(xm.value)){
alert("姓名非法!只能是中文最少兩個字,最多不得超過5個字!");
return false;
}
//alert(xb.value!="男");
switch(xb.value){
case "男":break;
case "女":break;
default:alert("性別只能是/"男/"或/"女/"!"); return false;
}
if(!rec.exec(jg.value)){
alert("籍貫非法!只能是中文最少兩個字,最多不得超過5個字!！");
return false;
}
return true;
}
//-->
</SCRIPT>
<input id="s" type=button value="顯示學生信息" οnclick="show();">
<input id="que" type=button value="精確查詢" οnclick="que();">
<input id="add" type=button value="新增" οnclick="add();">
<input id="can" type=button value="取消" οnclick="can();" style="visibility:hidden">
<br>
<center>
<div id="ad" style="visibility:hidden">
<table><tr><td>學號:
<input type=text id="xh" style="ime-mode:disabled" size=5 maxlength=5 onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">
</td><td>姓名:
<input type=text id="xm" size=10 maxlength=5>
</td><td>性別:
<input type=text id="xb" size=5 maxlength=5>
</td><td>籍貫:
<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="查詢" οnclick="query();"></td>
<td><input id="mod" type=button value="修改" οnclick="mod();"></td>
<td><input id="del" type=button value="刪除" οnclick="del();"></td>
</tr>
</table>
</div>
</center>
<div id="findPanel">
<div id="findPanelTitle">可拖動</div>
<div id="findPanelContent">
<input type="text" size="20" value="a" id="key" οnkeydοwn="javascript:ChckSubmit(event);">
<input type="button" value="查找" οnclick="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;
//設置物件位置
findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;
findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;
//================================================================================
var foundCnt = 0; //已經找到了的結果的數量
//查找入口函數
function Find(key)
{
if (key == "")
{
return;
}
if (document.all)
{
IEFind(key);
}
else
{
NSFind(key);
}
}
//瀏覽器爲 IE 系列
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); //找到，後移一位以查找下一個
}
if (found)
{
rng.moveStart("character", -1);
rng.findText(key);
rng.select();
rng.scrollIntoView();
foundCnt++;
}
else
{
if (foundCnt > 0)
{
//已經查找一遍，找到有符合條件的結果，重新開始查找
foundCnt = 0;
IEFind(key);
}
else
{
//已經查找一遍，沒有找到符合條件的結果
alert("文檔搜索完畢。");
}
}
}
//瀏覽器爲 NS 系列
function NSFind(key)
{
if (window.find(key))
{
foundCnt++;
}
else
{
var found = false;
while (window.find(key, false, true))
{
found = true;
}
if (found)
{
//已經查找一遍，找到有符合條件的結果，重新查找也已經開始
foundCnt = 1;
}
else
{
//已經查找一遍，沒有找到符合條件的結果
alert("文檔搜索完畢。");
}
}
}
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;
//================================================================================
//拖拽過程中相關變量
var draging = false; //是否處於拖拽中
var offsetX = 0; //X方向左右偏移量
var offsetY = 0; //Y方向上下偏移量
//準備拖拽
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;
}
//拖拽中
function OnDrag()
{
if(!draging)
{
return;
}
//更新位置
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;
}
//結束拖拽
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><h2>學生信息管理</h2></caption>
<thead>　
<th>學號</th>
<th>姓名</th>　　
<th>性別</th>　　
<th>籍貫</th>　
</thead>　
<tr>　
<td>　　
<div DATAFLD="學號">　　
</td>　　
<td>　　
<div DATAFLD="姓名">
</td>　　
<td>　　
<div DATAFLD="性別">　　
</td>　　
<td>　　
<div DATAFLD="籍貫">　
</td>　
</tr>　
</table>
</div>
</center>
</body>
</html>

<html>
<head>
<title> 數據島的顯示　</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);
    //顯示數據
	function show(){
		var vbo = document.getElementById("s").value;
		if(vbo=="顯示學生信息"){
		   document.getElementById('info').style.visibility='visible';
		   document.getElementById("s").value="隱藏學生信息";
		 }else{
		    document.getElementById('info').style.visibility='hidden';
			document.getElementById("s").value="顯示學生信息";
		 }
	}
	//查找
	function que(){
	   document.getElementById("ad").style.visibility="visible";
	   document.getElementById("qmd").style.visibility="visible";
	 }

     /**
      * 解析XML文件函數
      * @param xmlDoc XML對象
      * @param name 屬性名稱 格式如: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 "";
  }
  //返回父節點(通過節點名字和節點值)
   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 child;
	    }
	   }
	  }
	  return '';
   }
   //通過父節點和子節點名返回子節點值
   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 '';
   }
   //通過父節點和子節點名返回子節點
   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 '';
   }

	//開始查找
	function  query(){
	   var renum = /^/d{5}$/;
	   if(renum.exec(xh.value)){
	   if(xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]")){
		     var nod = getNod('學號',xh.value);
	         //getNodVal(nod,'姓名');
	     	 //getNodVal(nod,'性別');
		     //getNodVal(nod,'籍貫');
		   /*document.getElementById("xm").value=xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/姓名").text;
		   document.getElementById("xb").value=xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/性別").text;
		   document.getElementById("jg").value=xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/籍貫").text;
		   document.getElementById("xh").disabled="true";	*/
		   document.getElementById("xm").value=getNodVal(nod,'姓名');
		   document.getElementById("xb").value= getNodVal(nod,'性別');
		   document.getElementById("jg").value= getNodVal(nod,'籍貫');
		 }else{
		  alert("該學號還沒有被佔用!");
		 }
	   }else{
	    alert("學號非法!學號5位數字!");
		return false;
	   }
	}
	//修改
	function mod(){	 
	 	if(info_check()){
		  if(xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]")){
            if(confirm("確認修改？")){
			  var nod = getNod('學號',xh.value);
			  getCurNod(nod,'姓名').text=xm.value;
			  getCurNod(nod,'性別').text=xb.value;
			  getCurNod(nod,'籍貫').text=jg.value;
			  /*
			  xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/姓名").text=xm.value;
			  xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/性別").text=xb.value;
			  xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]").selectSingleNode("學生/籍貫").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("修改成功!");
			  location.reload();
		    }
		  }else{
		    alert("該學號還沒有被佔用!請按學號查詢再進行修改!");
			return false;
		  }
		}
	}
	//新增學生
	function add(){
	    var  vadd = document.getElementById("add").value;
		if(vadd=="新增"){
		   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="顯示學生信息";
		   document.getElementById("ad").style.visibility="visible";
		   document.getElementById("add").value="保存";
		   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="新增";
		   alert("新增成功!");
		   location.reload();
		   }
		}
	}
	
	//刪除學生
	function del(){
	   var renum = /^/d{5}$/;
	   if(renum.exec(document.getElementById("xh").value)){
	    if(xmlDoc.selectSingleNode("/學生管理[學生/學號="+xh.value+"]")){
		  if(confirm("確認刪除？")){
			/*var node = xmlDoc.selectSingleNode("/學生管理[學生/學號="+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('學號',xh.value);
			  nod.parentNode.removeChild(nod);

			 saveXML();
			 can();
			 alert("刪除成功!");
			 location.reload();
		     }
		}else{
		    alert("該學號還沒有被佔用!請按學號查詢再進行修改!");
			return false;
		}
	  }else{
	    alert("學號非法!爲5位數字!");
		return false;
	  }
	}


	//取消新增
	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="新增";
	}
	//增加結點
	function add_node(){
	  	var  oxh = xmlDoc.createElement("學號");
		oxh.appendChild(xmlDoc.createTextNode(xh.value));
		var  oxm = xmlDoc.createElement("姓名");
		oxm.appendChild(xmlDoc.createTextNode(xm.value));
		var  oxb = xmlDoc.createElement("性別");
		oxb.appendChild(xmlDoc.createTextNode(xb.value));
		var  ojg = xmlDoc.createElement("籍貫");
		ojg.appendChild(xmlDoc.createTextNode(jg.value));

		var oxs = xmlDoc.createElement("學生");
		oxs.appendChild(oxh);
		oxs.appendChild(oxm);
		oxs.appendChild(oxb);
		oxs.appendChild(ojg);

	    var parent = xmlDoc.selectSingleNode("/學生管理");
		if(parent.hasChildNodes())   {   
           parent.insertBefore(oxs,parent.firstChild);   
          }else{   
           parent.appendChild(oxs);   
          } 
	}
	//保存XML
	function saveXML(){
		xmlDoc.save("stu.xml");
	}
	//驗證新增數據
	function info_check(){
	  var renum = /^/d{5}$/;
	  var rec = /^[/u4E00-/u9FA5]{2,5}$/;
	  if(!renum.exec(document.getElementById("xh").value)){
	    alert("學號非法!爲5位數字!");
		return false;
	   }
	  if(!rec.exec(xm.value)){
	    alert("姓名非法!只能是中文最少兩個字,最多不得超過5個字!");
		return false;
	  }
	  //alert(xb.value!="男");
	  switch(xb.value){
	   case "男":break;
	   case "女":break;
	   default:alert("性別只能是/"男/"或/"女/"!"); return false;
	  }


	  if(!rec.exec(jg.value)){
	  	alert("籍貫非法!只能是中文最少兩個字,最多不得超過5個字!！");
		return false;
	  }
	  return true;
	}
	
//-->
</SCRIPT>

<input id="s" type=button value="顯示學生信息" οnclick="show();">
<input id="que" type=button value="精確查詢" οnclick="que();">
<input id="add" type=button value="新增" οnclick="add();">
<input id="can" type=button value="取消" οnclick="can();" style="visibility:hidden">

<br>
<center>
<div id="ad" style="visibility:hidden">
  <table><tr><td>學號:
  <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 用於光閉輸入法 onKeyPress 只能輸入數字-->
  </td><td>姓名:
  <input type=text id="xm" size=10 maxlength=5>
  </td><td>性別:
  <input type=text id="xb" size=5 maxlength=5>
  </td><td>籍貫:
  <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="查詢" οnclick="query();"></td>
  <td><input id="mod" type=button value="修改" οnclick="mod();"></td>
  <td><input id="del" type=button value="刪除" οnclick="del();"></td>   
  </tr>
  </table>
</div>
</center>
<div id="findPanel">
  <div id="findPanelTitle">可拖動</div>
  <div id="findPanelContent">
    <input type="text" size="20" value="a" id="key" οnkeydοwn="javascript:ChckSubmit(event);">
    <input type="button" value="查找" οnclick="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;

//設置物件位置
findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;
findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;
//================================================================================
var foundCnt = 0; //已經找到了的結果的數量

//查找入口函數
function Find(key)
{
    if (key == "")
    {
        return;
    }
    
    if (document.all)
    {
        IEFind(key);
    }
    else
    {
        NSFind(key);
    }
}

//瀏覽器爲 IE 系列
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); //找到，後移一位以查找下一個
    }
    
    if (found)
    {
         rng.moveStart("character", -1);
         rng.findText(key);
         rng.select();
         rng.scrollIntoView();
         foundCnt++;
    }
    else
    {
        if (foundCnt > 0)
        {
            //已經查找一遍，找到有符合條件的結果，重新開始查找
            foundCnt = 0;
            IEFind(key);
        }
        else
        {
            //已經查找一遍，沒有找到符合條件的結果
            alert("文檔搜索完畢。");
        }
    }
}

//瀏覽器爲 NS 系列
function NSFind(key)
{
    if (window.find(key))
    {
        foundCnt++;
    }
    else
    {
        var found = false;
        while (window.find(key, false, true))
        {
            found = true;
        }
        
        if (found)
        {
            //已經查找一遍，找到有符合條件的結果，重新查找也已經開始
            foundCnt = 1;
        }
        else
        {
            //已經查找一遍，沒有找到符合條件的結果
            alert("文檔搜索完畢。");
        }
    }
}    

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;
//================================================================================
//拖拽過程中相關變量
var draging = false; //是否處於拖拽中
var offsetX = 0;     //X方向左右偏移量
var offsetY = 0;     //Y方向上下偏移量

//準備拖拽
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;
}

//拖拽中
function OnDrag()
{
    if(!draging)
    {
        return;
    }
    //更新位置
    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;
}

//結束拖拽
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><h2>學生信息管理</h2></caption>
<thead>　
<th>學號</th>
<th>姓名</th>　　
<th>性別</th>　　
<th>籍貫</th>　
</thead>　
<tr>　
<td>　　
<div DATAFLD="學號">　　
</td>　　
<td>　　
<div DATAFLD="姓名">
</td>　　
<td>　　
<div DATAFLD="性別">　　
</td>　　
<td>　　
<div DATAFLD="籍貫">　
</td>　
</tr>　
</table>
</div>


</center>
</body>
</html>

xml文件如下(stu.xml)

Java代碼

<?xml version="1.0" encoding="gb2312"?>
<學生管理>
<學生>
　<學號>97001</學號>
　<姓名>王五</姓名>
　<性別>男 </性別>
　<籍貫>上海</籍貫>
</學生>
<學生>
　<學號>97002</學號>
　<姓名>李四 </姓名>
　<性別>男 </性別>
　<籍貫>浙江 </籍貫>
</學生>
<學生>
　 <學號>97006 </學號>
　 <姓名>張三 </姓名>
　 <性別>男</性別>
　 <籍貫>浙江</籍貫>
</學生>
</學生管理>

javascript操作xml(增刪改查)例子代碼

關於使用host訪問跟使用IP訪問IIS的區別

ASP.NET強大的SqlCacheDependency

FCKEditor在Asp.net中如何使用！~

悲催的MSSQL 2 Oracle之旅(一)

JQuery fullcalender文檔

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結