javascript操作xml(添削・修正)例コード
20023 ワード
自分で小さいものを作って、そんなに良くないですが、初心者にとってはいい例です.
含まれています
stu.htta(
はHTMLアプリケーションです.
stu.xml
注意下のHTMLコードは拡張子としてhttaとして保存しなければなりません.XMLファイルを操作(添削)すると、権限がないように注意します.
ファイル
stu.httaコードは以下の通りです.
stu.xml)
含まれています
stu.htta(
はHTMLアプリケーションです.
stu.xml
注意下のHTMLコードは拡張子としてhttaとして保存しなければなりません.XMLファイルを操作(添削)すると、権限がないように注意します.
ファイル
stu.httaコードは以下の通りです.
<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=" " onclick="show();">
<input id="que" type=button value=" " onclick="que();">
<input id="add" type=button value=" " onclick="add();">
<input id="can" type=button value=" " onclick="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=" " onclick="query();"></td>
<td><input id="mod" type=button value=" " onclick="mod();"></td>
<td><input id="del" type=button value=" " onclick="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" onkeydown="javascript:ChckSubmit(event);">
<input type="button" value=" " 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;
//
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>stu.xml)
<?xml version="1.0" encoding="gb2312"?>
< >
< >
< >97001</ >
< > </ >
< > </ >
< > </ >
</ >
< >
< >97002</ >
< > </ >
< > </ >
< > </ >
</ >
< >
< >97006 </ >
< > </ >
< > </ >
< > </ >
</ >
</ >