JS 增删改查操作XML
效果图:
<!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的更多相关文章
- 用dom4j解析xml文件并执行增删改查操作
转自:https://www.aliyun.com/jiaocheng/1339446.html xml文件: <?xml version="1.0" encoding=&q ...
- 详谈easyui datagrid增删改查操作
转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...
- MyBatis批量增删改查操作
前文我们介绍了MyBatis基本的增删该查操作,本文介绍批量的增删改查操作.前文地址:http://blog.csdn.net/mahoking/article/details/43673741 ...
- 后盾网lavarel视频项目---lavarel使用模型进行增删改查操作
后盾网lavarel视频项目---lavarel使用模型进行增删改查操作 一.总结 一句话总结: 使用模型操作常用方法 查一条:$model=Tag::find($id); 删一条:Tag::dest ...
- MyBatis学习之简单增删改查操作、MyBatis存储过程、MyBatis分页、MyBatis一对一、MyBatis一对多
一.用到的实体类如下: Student.java package com.company.entity; import java.io.Serializable; import java.util.D ...
- 如何搭建一个WEB服务器项目（二）—— 对数据库表进行基本的增删改查操作
使用HibernateTemplate进行增删改查操作 观前提示:本系列文章有关服务器以及后端程序这些概念,我写的全是自己的理解,并不一定正确,希望不要误人子弟.欢迎各位大佬来评论区提出问题或者是指出 ...
- 学习MyBatis必知必会（5）~了解myBatis的作用域和生命周期并抽取工具类MyBatisUtil、mybatis执行增删改查操作
一.了解myBatis的作用域和生命周期[错误的使用会导致非常严重的并发问题] (1)SqlSessionFactoryBuilder [ 作用:仅仅是用来创建SqlSessionFactory,作用 ...
- mongoVUE的增删改查操作使用说明
mongoVUE的增删改查操作使用说明 一. 查询 1. 精确查询 1)右键点击集合名,再左键点击Find 或者直接点击工具栏上的Find 2)查询界面,包括四个区域 {Find}区,查询条件格式{& ...
- (转)SQLite数据库增删改查操作
原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...
随机推荐
- 25）PHP，数据库定义
(1)数据库定义语句: create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]: 说明: ,if not exists ...
- RHEL安装rails后启动报错
[root@redhat7 demo]# rails server/usr/local/rvm/gems/ruby-2.4.1/gems/bundler-1.16.0.pre.2/lib/bundle ...
- 《走出软件作坊》//TODO
目录 简介 结束语 简介 作者吕建伟(@阿朱),研发管理专家,原京东技术学院院长,中国互联网技术联盟发起人,历任首席架构师.技术总监以及CTO等职位.目前已接受用友集团董事长王文京邀请,加入用友组建研 ...
- 关于k8s资源类型和缩写
资源类型 缩写 描述 clusters componentstatuses cs configmaps cm daemonsets ds deployments deploy ...
- 树状数组 hdu2689 hdu2838
题意:给定一个正整数n,和一个1-n的一个排列,每个数可以和旁边的两个数的任意一个交换,每交换一次总次数就要加一,问将这个排列转换成一个递增的排列需要多少次交换? 题意可以转换成求这个排列的逆序对数. ...
- OpenCV 使用二维特征点(Features2D)和单映射(Homography)寻找已知物体
#include <stdio.h> #include <iostream> #include "opencv2/core/core.hpp" #inclu ...
- FP-Grow树
序言 FP-growth(Frequent Pattern Tree, 频繁模式树),是韩家炜老师提出的挖掘频繁项集的方法,是将数据集存储在一个特定的称作FP树的结构之后发现频繁项集或频繁项对,即常在 ...
- Python之循环条件、变量、字符串格式化
一.认识python python语言的优缺点,自行百度,这里不概述,简单说下,python是一门面向对象,解释型计算机语言.那么问题来了,解释型和编译型语言有什么区别? 1.解释型和编译型语言区别 ...
- jmeter如何解决乱码问题
使用jmeter的时候时常遇到中文乱码的情况,下面总结一下几个解决方法,方便以后进行复习. 1.添加后置处理器Beanshell PostProcessor,在输入框内写入“prve.setDateE ...
- linux上apache的安装
1.简介 Apache HTTP Server(简称Apache或httpd)是Apache软件基金会的一个开放源代码的网页服务器软件,旨在为unix,windows等操作系统中提供开源httpd服务 ...