javascript操作xml(增删改查)例子代码

最新推荐文章于 2024-06-24 15:51:31 发布
最新推荐文章于 2024-06-24 15:51:31 发布
阅读量532 收藏 3
点赞数
文章标签： XML JavaScript IE 浏览器 ViewUI
[b]自己做了一个小东西，不是很好，但是对初学来说是一个不错的例子!
[/b]
包括了[color=darkred]stu.hta[/color]([color=blue]是HTML应用程序[/color]);
[color=darkred]stu.xml[/color]
[b]注意下面的HTML代码必须保存为后缀名为[color=red]hta[/color]否则当对XML文件进行操作(增删改)的时候就会提示没有权限!![/b]

文件[color=darkred][b]stu.hta[/b][/color]代码如下:
[code]
<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>[/code]
xml文件如下([b][color=red]stu.xml[/color][/b])


[code]
<?xml version="1.0" encoding="gb2312"?>
<学生管理>
<学生>
　<学号>97001</学号>
　<姓名>王五</姓名>
　<性别>男 </性别>
　<籍贯>上海</籍贯>
</学生>
<学生>
　<学号>97002</学号>
　<姓名>李四 </姓名>
　<性别>男 </性别>
　<籍贯>浙江 </籍贯>
</学生>
<学生>
　 <学号>97006 </学号>
　 <姓名>张三 </姓名>
　 <性别>男</性别>
　 <籍贯>浙江</籍贯>
</学生>
</学生管理>

[/code]
xjwqz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript操作XML
01-03
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") 'JAVASCRIPT中的创建对象 set objXml=CreateObject("Microsoft.XMLDOM") '创建解析器对象 objXml.async="false" objXml.load("test.xml") '装载xml文件 objXml.load(Server.MapPath("test.xml")) '根据绝对路径装载xml文件 Set objRootsite = xmlDoc.getElementsByTagName("NewList") '查找某一节点"NewList" objNextRootsiteName = xmlDoc.getElementsByTagName("NewList").item(0).nodeName Set objRootsite = objXml.documentElement.selectSingleNode("NewList") '查找某一节点"NewList" document.write(objRootsite.nodeName) '当前节点名称 objNextRootsite = objRootsite.childNodes.item(1) '查找"NewList"的第一子节点 objNextRootsiteText = objNextRootsite.childNodes.item(1).text '查找"NewList"的第一子节点的节点内容 xmlChildNode = objXml.documentElement.childNodes '获取当前节点 document.Write (xmlChildNode.nodename) '当前节点名称 document.write (xmlChildNode.text) '当前节点文本内容 frm.label.innerText = xmlChildNode.item(1).text '将Xml中的文本内容转换为Html中的内容 xmlChildNode.GetAttributeNode("name").Nodevalue '获取属性名为name的属性值 xmlChildNode.length 'xmlChildNode节点的子节点数量 '取出一个节点的属性集合 set objnodes=objXml.documentElement.SelectSingleNode("//people/man").GetAttributeNode("name").attributes for each element in objnodes response.write element.nodename '属性名 response.write element.nodevalue '属性值 next xmlDoc.getElementsByTagName("from").item(0).text xmlDoc.removeChild objRootsite '删除某个节点 objXml.parseError '错误接受容器 objXml.parseError.errorCode '返回长整型错误代码 objXml.parseError.reason '返回字符串型错误原因 objXml.parseError.line '返回长整型错误行号 objXml.parseError.linePos '返回长整型错误行字符位置 objXml.parseError.srcText '返回错误所在行的源代码 objXml.parseError.url '返回url装载文档指针---最近一份含有解析错误的XML文档的URL地址 objXml.parseError.filePos '返回长整型错误文件位置---在文档中的绝对字符位置
javascript操作xml(增删改查)例子代码hta版
10-28
本篇文章主要介绍了在HTA环境中，如何使用JavaScript进行XML文件的增删改查操作。首先，文章指出在进行这些操作时，需要将HTML代码保存为hta后缀，否则在尝试对XML文件进行操作时会出现权限不足的提示。接着，文章...
js对xml进行增删改查
weixin_34233618的博客
04-23 521
stu.xml 文件<?xml version="1.0" encoding="utf-8" ?> <student> <stu id="1"> <stuName>张三</stuName> <stuAge>20</stuAge> <stuSex>男&l...
JavaScript 中 xml 基本使用
最新发布
2401_84619606的博客
06-24 341
1、xml 简介xml 是w3c组织发布的技术，xml 有两个版本，1.0和1.1的版本，一般使用的是1.0的版本，因为1.1的版本不能向下兼容xml（eXtensible Markup Language）：可扩展标记语言，使用标签来操作，标签可以扩展，HTML里面的标签是固定的，每个标签都有特定的含义，而xml 的标签可以自己定义，还可以写中文标签xml 可以像HTML一样用于显示数据，但这不是主要功能，xml 主要是用来存储数据的2、xml 的应用不同系统之间的数据传输。
JS 增删改查操作XML
weixin_33806509的博客
12-13 397
效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="ht...
Javascript操作xml
淡薄以明志，宁静以致远
09-08 1943
           在B/S系统中经常需要在客户端和服务器端之间交互数据，这些数据一般都是在客户端由Javscript组织然后发回服务器。对于一些复杂的数据我们一般用xml的格式组织。本文将给出javascript对xml的一些基本操作。        在javascript中是利用MSXml2组件对xml进行操作。该组件将xml加载到内存中形成一个树状的数据结构，可以利用XPath语言
javascript 操作xml
that3的专栏
06-03 332
黄晓明 58 黄晓明 59 假设你的xml文档名为policy.xml //// var xmlDoc try{ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); document.write("/////////////////////"); } catch(e)
XML.rar_crud_javascript_javascript xml_xml_增删改查英文
09-20
在这个“XML.rar”压缩包中，我们重点关注的是使用JavaScript来操作XML，实现数据的增删改查，并且支持中英文切换的功能。 在JavaScript中处理XML，首先我们需要了解XML DOM（Document Object Model）。DOM是一种...
php数据库的增删改查 php与javascript之间的交互
10-19
在本文中，我们将深入探讨PHP如何进行数据库的增删改查操作，以及PHP与JavaScript之间的交互。首先，我们需要了解PHP操作MySQL数据库的基本步骤。 1. **PHP数据库连接**： PHP使用`mysql_connect()`函数连接到...
AJAX实现数据的增删改查操作详解【java后台】
10-15
本文将深入讲解如何使用AJAX结合Java后台实现数据的增删改查操作，这对于构建动态、交互性强的Web应用至关重要。 首先，我们从HTML界面开始。在这个例子中，我们有四个主要的操作按钮：插入（Insert）、查询（Query...
jquery easy ui+ssh 增删改查例子
08-26
这里，我们深入探讨一下使用jQuery EasyUI与SSH框架进行数据操作（增删改查）的基础知识。 jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列轻量级、易于使用的组件，如表格、对话框、菜单等，用于构建富...
javascript 对xml文件的增删改
12-24
一个很好的学习javaScript对xml文件的增删改的例子
javascript操作xml文件示例
03-16
javascript操作xml文件示例代码，包括增删改查等操作
js实现操作xml
04-04
使用js实现xml节点的查找、增加、修改、删除操作 .
对XML进行增删改查
08-13
NULL 博文链接：https://zhouhaiyang88.iteye.com/blog/2302442
html+css+js表格动态增删改与xml加载与保存
03-29
html+css+js实现表格动态增添、删除、修改；可以进行xml加载，并获取表格中内容保存为xml，双击单元格修改，表格立体美化。
使用Javascript操作XML
CYZ412的博客
12-05 169
摘自：http://book.51cto.com/art/200805/72969.htm   11.2  使用Javascript操作XML 11.2.1  MSXML介绍 在IE中，微软提供了MSXML控件来支持XML操作。每个系统安装的MSXML版本都有可能不同，因此在编写程序的时候要注意版本的确定。目前MSXML从旧到新有以下几个版本。 • Microsoft.XmlDom (...
javascript 创建并操作xml
路人甲的博客
04-23 5703
原地址找不到了，直接附上代码。 //测试demo $(function(){ var xmlDom=$($.parseXml("")); xmlDom.find("root").appendXml("").text("测试"); xmlDom.find("content").beforeXml(""); alert(xmlDom.xml()); }); (function($) {
SSH框架下实现增删改查操作教程
在这个例子中，需要创建对应于增删改查操作的JSP页面，如`addUser.jsp`、`deleteUser.jsp`等，这些页面会通过表单提交或者链接触发Struts Action。 5. 整合Spring，Struts和Hibernate： SSH框架的整合使得业务逻辑...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值