效果图:

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Document</title>
  7.         <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
  8.         <style type="text/css">
  9.             body {
  10.                 text-align: center;
  11.                 /* 页面元素居中 */
  12.             }
  13.         </style>
  14.         <script type="text/javascript">
  15.             //定义全局变量
  16.             cdcatalog = loadXML("cdcatalog.xml");
  17.             root = cdcatalog.documentElement;
  18.             cd = root.getElementsByTagName("cd");
  19.             valArr = [];
  21.             function onloadFun() {
  22.                 //valArr赋值
  23.                 $('#show').find("th").each(function(i) {
  24.                     valArr.push($.trim($(this).text()));
  25.                 });
  26.                 loadXMLFun();
  27.             }
  28.              //创建xmldom对象
  30.             function loadXML(xmlFile) {
  31.                 var xmlDom = null;
  32.                 try {
  33.                     //xmlhttp方式，支持火狐、chrome、oprea等浏览器，但不可跨域
  34.                     var xmlhttp = new window.XMLHttpRequest();
  35.                     xmlhttp.open("GET", xmlFile, false);
  36.                     xmlhttp.send(null);
  37.                     if (xmlhttp.status == 200) {
  38.                         xmlDom = xmlhttp.responseXML;
  39.                     } else {
  40.                         //传入的是XML字符串而非XML地址时非IE浏览器处理
  41.                         var parseXml = new DOMParser();
  42.                         var xmlDom = parseXml.parseFromString(xmlFile, "text/xml");
  43.                     }
  44.                 } catch (ex) {
  45.                     //传入的是XML字符串而非XML地址时非IE浏览器处理
  46.                     var parseXml = new DOMParser();
  47.                     var xmlDom = parseXml.parseFromString(xmlFile, "text/xml");
  49.                 }
  50.                 return xmlDom;
  51.             }
  53.             function loadXMLFun() {
  54.                 fillTable(cd);
  55.             }
  57.             function fillTable(list) {
  58.                 var trs = [];
  59.                 var tds = [];
  61.                 for (var x = 0; x < list.length; x++) {
  62.                     trDom = $('<tr></tr>');
  63.                     for (var i = 0; i < valArr.length; i++) {
  64.                         $('<td >' + getValue(list, x, valArr[i]) + '</td>').appendTo(trDom);
  65.                         trs.push(trDom);
  66.                     }
  67.                 }
  68.                 for (var j = 0; j < trs.length; j++) {
  69.                     $(trs[j]).appendTo($('#show'));
  70.                 }
  72.             }
  74.             function getValue(list, i, key) {
  75.                 try {
  76.                     if ("id" == key) {
  77.                         return list[i].getAttribute(key);
  78.                     } else if ("photo" == key) {
  79.                         imgsrc = list[i].getElementsByTagName(key)[0].childNodes[0].nodeValue;
  80.                         return '<img src="' + imgsrc + '" />';
  81.                     } else {
  82.                         return list[i].getElementsByTagName(key)[0].childNodes[0].nodeValue;
  83.                     }
  84.                 } catch (ex) {
  85.                     return "";
  86.                 }
  87.             }
  89.             function search() {
  90.                 var searchStrLow = $.trim($("#artistText").val().toLowerCase());
  91.                 var flag = false;
  92.                 var tmpArray = [];
  93.                 $("table tbody tr").eq(0).nextAll().remove();
  94.                 /*$(root).find('cd').each(function() {
  95.             var artistLow = $(this).find("artist").text().toLowerCase();
  96.             if (artistLow.indexOf(searchStrLow) != -1) {
  97.                 fillTable($(this));
  98.                 flag = true;
  99.             }
  100.         });
  101.         */
  102.                 for (var i = 0; i < cd.length; i++) {
  103.                     var artistLow = $.trim(cd[i].getElementsByTagName("artist")[0].childNodes[0].nodeValue.toLowerCase());
  104.                     if (artistLow.indexOf(searchStrLow) != -1) {
  105.                         tmpArray.push(cd[i]);
  106.                         flag = true;
  107.                     }
  108.                 }
  110.                 fillTable(tmpArray);
  111.                 if (flag == false) {
  112.                     alert("查询不到结果!")
  113.                 }
  115.             }
  117.             function modi() {
  118.                 $("table tbody tr").eq(0).nextAll().remove();
  119.                 //修改第3张cd的数量为1
  120.                 root.getElementsByTagName("quantity")[2].childNodes[0].nodeValue = "1";
  121.                 fillTable(cd);
  122.             }
  124.             function add() {
  125.                 var tmp;
  126.                 var lines = ++cd.length;
  127.                 $("table tbody tr").eq(0).nextAll().remove();
  128.                 //创建一个cd节点
  129.                 newElem = cdcatalog.createElement("cd");
  130.                 for (var i = 0; i < valArr.length; i++) {
  131.                     if ("id" == valArr[i]) {
  132.                         newElem.setAttribute("id", "00" + lines); //设置该节点id属性
  133.                     } else if ("photo" == valArr[i]) {} else {
  134.                         tmp = cdcatalog.createElement(valArr[i]);
  135.                         tmp.textContent = valArr[i];
  136.                         newElem.appendChild(tmp);
  137.                     }
  138.                 }
  139.                 root.appendChild(newElem);
  140.                 fillTable(cd);
  141.             }
  143.             function remove() {
  144.                 root.children[0].remove();
  145.                 $("table tbody tr").eq(0).nextAll().remove();
  146.                 fillTable(cd);
  147.             }
  148.         </script>
  149.     </head>
  151.     <body onload="onloadFun()"> <span>输入artist:</span>
  153.         <input id="artistText" type="text" />
  154.         <input id="searchButton" type="button" value="搜索" onclick="search()" />
  155.         <input id="addButton" type="button" value="添加" onclick="add()" />
  156.         <input id="modiButton" type="button" value="修改" onclick="modi()" />
  157.         <input id="modiButton" type="button" value="删除" onclick="remove()" />
  158.          <h2> CD </h1>
  159.         <table border="1px dashed #999999" id="show" align="center" bgcolor="#f9f9f9">
  160.              <tbody>
  161.             <tr>
  162.                 <th>id</th>
  163.                 <th>title</th>
  164.                 <th>artist</th>
  165.                 <th>country</th>
  166.                 <th>company</th>
  167.                 <th>price</th>
  168.                 <th>year</th>
  169.                 <th>quantity</th>
  170.                 <th>photo</th>
  171.             </tr>
  172.             </tbody>
  173.         </table>
  174.     </body>
  175. </html>

XML 文件

  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <!-- edited with XMLSPY v5 U (http://www.xmlspy.com) by et8 (et8) -->
  3. <!-- Edited with XML Spy v2005 (http://www.altova.com) -->
  4. <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
  5. <cdcatalog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="cdcatalog.xsd">
  6.     <cd id="0001">
  7.         <title>Empire Burlesque</title>
  8.         <artist>Bob Dylan</artist>
  9.         <country>USA</country>
  10.         <company>Columbia</company>
  11.         <price>10.90</price>
  12.         <year>1985</year>
  13.         <quantity>5</quantity>
  14.         <photo>default.jpg</photo>
  15.     </cd>
  16.     <cd id="0002">
  17.         <title>Hide your heart</title>
  18.         <artist>Bonnie Tyler</artist>
  19.         <country>UK</country>
  20.         <company>CBS Records</company>
  21.         <price>9.90</price>
  22.         <year>1988</year>
  23.         <quantity>15</quantity>
  24.         <photo>default.jpg</photo>
  25.     </cd>
  26.     <cd id="0003">
  27.         <title>Greatest Hits</title>
  28.         <artist>Dolly Parton</artist>
  29.         <country>USA</country>
  30.         <company>RCA</company>
  31.         <price>9.90</price>
  32.         <year>1982</year>
  33.         <quantity>5</quantity>
  34.         <photo>default.jpg</photo>
  35.     </cd>
  36.     <cd id="0004">
  37.         <title>Still got the blues</title>
  38.         <artist>Gary Moore</artist>
  39.         <country>UK</country>
  40.         <company>Virgin records</company>
  41.         <price>10.20</price>
  42.         <year>1990</year>
  43.         <quantity>5</quantity>
  44.         <photo>default.jpg</photo>
  45.     </cd>
  46.     <cd id="0005">
  47.         <title>Eros</title>
  48.         <artist>Eros Ramazzotti</artist>
  49.         <country>EU</country>
  50.         <company>BMG</company>
  51.         <price>9.90</price>
  52.         <year>1997</year>
  53.         <quantity>24</quantity>
  54.         <photo>default.jpg</photo>
  55.     </cd>
  56.     <cd id="0006">
  57.         <title>One night only</title>
  58.         <artist>Bee Gees</artist>
  59.         <country>UK</country>
  60.         <company>Polydor</company>
  61.         <price>10.90</price>
  62.         <year>1998</year>
  63.         <quantity>5</quantity>
  64.         <photo>default.jpg</photo>
  65.     </cd>
  66.     <cd id="0007">
  67.         <title>Sylvias Mother</title>
  68.         <artist>Dr.Hook</artist>
  69.         <country>UK</country>
  70.         <company>CBS</company>
  71.         <price>8.10</price>
  72.         <year>1973</year>
  73.         <quantity>5</quantity>
  74.         <photo>default.jpg</photo>
  75.     </cd>
  76.     <cd id="0008">
  77.         <title>Maggie May</title>
  78.         <artist>Rod Stewart</artist>
  79.         <country>UK</country>
  80.         <company>Pickwick</company>
  81.         <price>8.50</price>
  82.         <year>1990</year>
  83.         <quantity>5</quantity>
  84.         <photo>default.jpg</photo>
  85.     </cd>
  86.     <cd id="0009">
  87.         <title>Romanza</title>
  88.         <artist>Andrea Bocelli</artist>
  89.         <country>EU</country>
  90.         <company>Polydor</company>
  91.         <price>10.80</price>
  92.         <year>1996</year>
  93.         <quantity>5</quantity>
  94.         <photo>default.jpg</photo>
  95.     </cd>
  96.     <cd id="0010">
  97.         <title>When a man loves a woman</title>
  98.         <artist>Percy Sledge</artist>
  99.         <country>USA</country>
  100.         <company>Atlantic</company>
  101.         <price>8.70</price>
  102.         <year>1987</year>
  103.         <quantity>3</quantity>
  104.         <photo>default.jpg</photo>
  105.     </cd>
  106. </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. python实现个人信息随机生成

    """ 生成随机姓名.电话号码.身份证号.性别.应行卡号.邮箱 """ import random from firstname impor ...

  2. python关于文件操作

    今日所得 文件操作模式的补充 文件光标的移动控制 截断文件 修改文件 函数的简单介绍 文件操作模式的补充 """ r w a 将上面的三个模式称为纯净模式 r+ w+ a ...

  3. linux环境下卸载mysql

    第一种使用yum安装的mysql,使用如下命令进行卸载(不能确定使用何种方式安装的mysql情况下,按后续步骤一一进行处理即可): # yum remove mysql mysql-server my ...

  4. OpenCVSharp介绍

    OpenCvSharp 是一个OpenCV的.Net wrapper,应用最新的OpenCV库开发,使用习惯比EmguCV更接近原始的OpenCV,有详细的使用样例供参考.该库采用LGPL发行,对商业 ...

  5. zabbix 扩展脚本

    #!/usr/bin/env python #encoding:utf8 # desc: self-inspection # args: # reboot : reboot AP # check : ...

  6. 吴裕雄--天生自然python学习笔记：WEB数据抓取与分析

    Web 数据抓取技术具有非常巨大的应用需求及价值, 用 Python 在网页上收集数据,不仅抓取数据的操作简单, 而且其数据分析功能也十分强大. 通过 Python 的时lib 组件中的 urlpar ...

  7. python可变类型和不可变类型，深拷贝vs浅拷贝

    转载:https://www.cnblogs.com/huamingao/p/5809936.html 核心提示: 可变类型 Vs 不可变类型 可变类型(mutable):列表,字典 不可变类型(un ...

  8. Java IO: Reader And Writer

    原文链接 作者: Jakob Jenkov  译者: 李璟(jlee381344197@gmail.com) Java IO的Reader和Writer除了基于字符之外,其他方面都与InputStre ...

  9. JVM笔记(一)

    <ignore_js_op> Class Loader类加载器负责加载class文件,class文件在文件开头有特定的文件标识,并且ClassLoader只负责class文件的加载,至于它 ...

  10. EMP平台简介（转载）

    1.什么是EMP EMP平台是一个基于J2EE体系的.WEB应用的.基础框架平台: 表现逻辑框架(MVCFrameWork)与业务逻辑框架(EMPBizLogic)分离: 组件化.配置化设计技术: 可 ...