JS 增删改查操作XML
2024-10-08 20:58:01
效果图:
<!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>
最新文章
- 向mysql中插入Date类型的数据
- Distribution2：Distribution Writer
- 洛谷 P1330 封锁阳光大学 Label：染色问题
- 建表的sql
- Kinect For Windows V2开发日志二：Kinect V2的基本参数
- OCI-DML-更新数据库中不存在的字段
- uva 11817 - Tunnelling the Earth
- NOT 运算符
- Redis安装与基本配置(转)
- web架构设计经验分享（转）
- Selenium2（java）页面对象模型（Page Object） 八
- 网站运维工具使用iis日志分析工具分析iis日志(iis日志的配置)
- 【1414软工助教】团队作业5——测试与发布（Alpha版本） 得分榜
- 《On Writing Well 30th Anniversa》【PDF】下载
- 使用IE浏览提示：该页面无法显示
- 梦殇 chapter two
- 基于WebGL的三维的物联网平台技术
- spring cloud连载第三篇补充之Zuul
- Docker技术这些应用场景【转】
- hdu4848 求到达每一个点总时间最短（sum[d[i]]）。