jquery 解析 xml

三月沙

浏览: 619508 次
性别:
来自: 北京

最近访客更多访客>>

932835425

a562293298

chehaoj

zjamson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

XML jQuery CSS HTML JavaScript

一个jquery解析xml的例子

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.4.4.js" > </script>
        <script type="text/javascript">

            function search()
            {
                var html="<table><tr><td>书名</td><td>作者</td><td>价格</td><td>年代</td></tr>";
                $.post("books.xml", function(xml){
                    $(xml).find("name").each(function(){
                        html+="<tr><td>"+$(this).text()+"</td><td>"
                        html+=$(this).siblings("author").text()+"</td><td>";
                        html+=$(this).siblings("price").text()+"</td><td>"
                        html+=$(this).siblings("year").text()+"</td></tr>";
                    })
                    html+="</table>"
                    $("#txtHint").html(html);
                }, "xml");
            }

            function ui()
            {
                $("table tr:odd").css("color", "#72cfd7");
                $("table tr:even").css("color", "#cedfde");
                $("table tr:first").css("color", "red");
            }

        </script>
        <style type="text/css">
            td{
                width: 100px;
            }
        </style>
    </head>
    <body>

        <button onclick="search()" >显示图书信息</button>  <button onclick="ui()" >应用样式</button><br>
	图书信息：<div id="txtHint"></div>
    </body>
</html>

books.xml文件

<?xml version="1.0" encoding="utf-8"?>
<books>
    <book isbn="34839342">
        <name>《西游记》</name>
        <price>80</price>
        <author>吴承恩</author>
        <year>元末</year>
    </book>
    <book isbn="538293582">
        <name>《三国演义》</name>
        <price>90</price>
        <author>罗贯中</author>
        <year>明代</year>
    </book>
    <book isbn="3973295732">
        <name>《水浒传》</name>
        <price>75</price>
        <author>施耐庵</author>
        <year>元末</year>
    </book>
    <book isbn="328643827">
        <name>《红楼梦》</name>
        <price>79</price>
        <author>曹雪芹</author>
        <year>元末</year>
    </book>
</books>

结果预览