JS 增删改查操作XML -云博客

JS 增删改查操作XML

# 前端 2024-05-05 06:03 0 25 来源：云博客

效果图:

<!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>