效果图:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<style type="text/css">
body {
text-align: center;
/* 页面元素居中 */
}
</style>
<script type="text/javascript">
//定义全局变量
cdcatalog = loadXML("cdcatalog.xml");
root = cdcatalog.documentElement;
cd = root.getElementsByTagName("cd");
valArr = []; function onloadFun() {
//valArr赋值
$('#show').find("th").each(function(i) {
valArr.push($.trim($(this).text()));
});
loadXMLFun();
}
//创建xmldom对象 function loadXML(xmlFile) {
var xmlDom = null;
try {
//xmlhttp方式,支持火狐、chrome、oprea等浏览器,但不可跨域
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", xmlFile, false);
xmlhttp.send(null);
if (xmlhttp.status == 200) {
xmlDom = xmlhttp.responseXML;
} else {
//传入的是XML字符串而非XML地址时非IE浏览器处理
var parseXml = new DOMParser();
var xmlDom = parseXml.parseFromString(xmlFile, "text/xml");
}
} catch (ex) {
//传入的是XML字符串而非XML地址时非IE浏览器处理
var parseXml = new DOMParser();
var xmlDom = parseXml.parseFromString(xmlFile, "text/xml"); }
return xmlDom;
} function loadXMLFun() {
fillTable(cd);
} function fillTable(list) {
var trs = [];
var tds = []; for (var x = 0; x < list.length; x++) {
trDom = $('<tr></tr>');
for (var i = 0; i < valArr.length; i++) {
$('<td >' + getValue(list, x, valArr[i]) + '</td>').appendTo(trDom);
trs.push(trDom);
}
}
for (var j = 0; j < trs.length; j++) {
$(trs[j]).appendTo($('#show'));
} } function getValue(list, i, key) {
try {
if ("id" == key) {
return list[i].getAttribute(key);
} else if ("photo" == key) {
imgsrc = list[i].getElementsByTagName(key)[0].childNodes[0].nodeValue;
return '<img src="' + imgsrc + '" />';
} else {
return list[i].getElementsByTagName(key)[0].childNodes[0].nodeValue;
}
} catch (ex) {
return "";
}
} function search() {
var searchStrLow = $.trim($("#artistText").val().toLowerCase());
var flag = false;
var tmpArray = [];
$("table tbody tr").eq(0).nextAll().remove();
/*$(root).find('cd').each(function() {
var artistLow = $(this).find("artist").text().toLowerCase();
if (artistLow.indexOf(searchStrLow) != -1) {
fillTable($(this));
flag = true;
}
});
*/
for (var i = 0; i < cd.length; i++) {
var artistLow = $.trim(cd[i].getElementsByTagName("artist")[0].childNodes[0].nodeValue.toLowerCase());
if (artistLow.indexOf(searchStrLow) != -1) {
tmpArray.push(cd[i]);
flag = true;
}
} fillTable(tmpArray);
if (flag == false) {
alert("查询不到结果!")
} } function modi() {
$("table tbody tr").eq(0).nextAll().remove();
//修改第3张cd的数量为1
root.getElementsByTagName("quantity")[2].childNodes[0].nodeValue = "1";
fillTable(cd);
} function add() {
var tmp;
var lines = ++cd.length;
$("table tbody tr").eq(0).nextAll().remove();
//创建一个cd节点
newElem = cdcatalog.createElement("cd");
for (var i = 0; i < valArr.length; i++) {
if ("id" == valArr[i]) {
newElem.setAttribute("id", "00" + lines); //设置该节点id属性
} else if ("photo" == valArr[i]) {} else {
tmp = cdcatalog.createElement(valArr[i]);
tmp.textContent = valArr[i];
newElem.appendChild(tmp);
}
}
root.appendChild(newElem);
fillTable(cd);
} function remove() {
root.children[0].remove();
$("table tbody tr").eq(0).nextAll().remove();
fillTable(cd);
}
</script>
</head> <body onload="onloadFun()"> <span>输入artist:</span> <input id="artistText" type="text" />
<input id="searchButton" type="button" value="搜索" onclick="search()" />
<input id="addButton" type="button" value="添加" onclick="add()" />
<input id="modiButton" type="button" value="修改" onclick="modi()" />
<input id="modiButton" type="button" value="删除" onclick="remove()" />
<h2> CD </h1>
<table border="1px dashed #999999" id="show" align="center" bgcolor="#f9f9f9">
<tbody>
<tr>
<th>id</th>
<th>title</th>
<th>artist</th>
<th>country</th>
<th>company</th>
<th>price</th>
<th>year</th>
<th>quantity</th>
<th>photo</th>
</tr>
</tbody>
</table>
</body>
</html>

XML 文件

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- edited with XMLSPY v5 U (http://www.xmlspy.com) by et8 (et8) -->
<!-- Edited with XML Spy v2005 (http://www.altova.com) -->
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<cdcatalog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="cdcatalog.xsd">
<cd id="0001">
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0002">
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
<quantity>15</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0003">
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0004">
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0005">
<title>Eros</title>
<artist>Eros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
<quantity>24</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0006">
<title>One night only</title>
<artist>Bee Gees</artist>
<country>UK</country>
<company>Polydor</company>
<price>10.90</price>
<year>1998</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0007">
<title>Sylvias Mother</title>
<artist>Dr.Hook</artist>
<country>UK</country>
<company>CBS</company>
<price>8.10</price>
<year>1973</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0008">
<title>Maggie May</title>
<artist>Rod Stewart</artist>
<country>UK</country>
<company>Pickwick</company>
<price>8.50</price>
<year>1990</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0009">
<title>Romanza</title>
<artist>Andrea Bocelli</artist>
<country>EU</country>
<company>Polydor</company>
<price>10.80</price>
<year>1996</year>
<quantity>5</quantity>
<photo>default.jpg</photo>
</cd>
<cd id="0010">
<title>When a man loves a woman</title>
<artist>Percy Sledge</artist>
<country>USA</country>
<company>Atlantic</company>
<price>8.70</price>
<year>1987</year>
<quantity>3</quantity>
<photo>default.jpg</photo>
</cd>
</cdcatalog>

JS 增删改查操作XML的更多相关文章

  1. 用dom4j解析xml文件并执行增删改查操作

    转自:https://www.aliyun.com/jiaocheng/1339446.html xml文件: <?xml version="1.0" encoding=&q ...

  2. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  3. MyBatis批量增删改查操作

      前文我们介绍了MyBatis基本的增删该查操作,本文介绍批量的增删改查操作.前文地址:http://blog.csdn.net/mahoking/article/details/43673741 ...

  4. 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作

    后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...

  5. MyBatis学习之简单增删改查操作、MyBatis存储过程、MyBatis分页、MyBatis一对一、MyBatis一对多

    一.用到的实体类如下: Student.java package com.company.entity; import java.io.Serializable; import java.util.D ...

  6. 如何搭建一个WEB服务器项目(二)—— 对数据库表进行基本的增删改查操作

    使用HibernateTemplate进行增删改查操作 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出 ...

  7. 学习MyBatis必知必会(5)~了解myBatis的作用域和生命周期并抽取工具类MyBatisUtil、mybatis执行增删改查操作

    一.了解myBatis的作用域和生命周期[错误的使用会导致非常严重的并发问题] (1)SqlSessionFactoryBuilder [ 作用:仅仅是用来创建SqlSessionFactory,作用 ...

  8. mongoVUE的增删改查操作使用说明

    mongoVUE的增删改查操作使用说明 一. 查询 1. 精确查询 1)右键点击集合名,再左键点击Find 或者直接点击工具栏上的Find 2)查询界面,包括四个区域 {Find}区,查询条件格式{& ...

  9. (转)SQLite数据库增删改查操作

    原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...

随机推荐

  1. Java类的三大特征

    1.三大特征是封装.继承和多态 2.封装 特点: 需要修改属性的访问控制符为private: 创建getter/setter方法用于属性的读写: 在getter/setter方法中加入属性控制语句,用 ...

  2. FaceIDViewer.rar

    FaceIDViewer用于查看Office工具栏控件的内置图标编号. 压缩包中包含4个文件,打开任何一个都可以进行查询.其中带有V2字样的文件,已经排除掉了空白图标. Excel版动态图: Word ...

  3. socket握手SYN和ACK理解

    ACK 英文缩写: ACK (ACKnowledge Character) 中文译名: 确认字符 分类: 传输与接入 解释: 在数据通信传输中,接收站发给发送站的一种传输控制字符.它表示确认发来的数据 ...

  4. 初试vue

    Vue了解 """ vue框架 vue是前台框架:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式. ...

  5. android五子棋游戏、资讯阅读、大学课程表、地图拖拽检测、小说搜索阅读app等源码

    Android精选源码 Android 自动生成添加控件 android旋转动画.圆形进度条组合效果源码 一款很强的手机五子棋app源码 android地图拖拽区域检测效果源码 实现Android大学 ...

  6. ckeditor+ckfinder添加水印。

    1.修改ckfinder文件下面的config.php:添加一句include_once "plugins/watermark/plugin.php";//水印配置文件 2.修改p ...

  7. LeetCode No.73,74,75

    No.73 SetZeroes 矩阵置零 题目 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 输入: [   [1,1,1],   [ ...

  8. 第一课 安装wamp环境

    1.准备 怎样选择PHP的版本 IIS 如果想使用IIS配置PHP的话,那么需要选择Non-Thread Safe(NTS)版本的PHP Apache 如果你是用的Apache的版本来自Apache ...

  9. 吴裕雄--天生自然python学习笔记:编写网络爬虫代码获取指定网站的图片

    我们经常会在网上搜索井下载图片,然而一张一张地下载就太麻烦了,本案例 就是通过网络爬虫技术, 一次性下载该网站所有的图片并保存 . 网站图片下载并保存 将指定网站的 .jpg 和 .png 格式的图片 ...

  10. 华为OD两轮技术面试

    华为OD面试1性格测试选积极向上的选项,注意,性格测试也会挂人,我一个朋友性格测试就没过.2机试 一道变成题目 1h 用例60%通过即可任给一个数组,元素有20M,1T,300G之类的,其中1T=10 ...