使用 jQuery 在 HTML 表中显示单独的 XML 元素

Displaying Separate XML elements in a HTML table using jQuery

本文关键字：单独 XML 元素 显示 jQuery HTML 使用      更新时间：2023-09-26

我正在尝试在html表中显示单独的xml元素。下面是我的 xml：

<?xml version="1.0" encoding="UTF-8"?>
<channel id="sky_one" source="Sky" date="25/11/2014">
    <programme>
        <desc>Tony's motorcycle bursts into flames between his legs while town planner Liz is left in agony after her half-tonne horse bolts and lands on top of her. Also in HD</desc>
        <title>The Real A &amp; E</title>
        <end>0630</end>
        <start>0600</start>
    </programme>
    <programme>
        <desc>When Justin tries to detach a winch rope from a rock face during a charity event, a loose boulder falls on his pelvis. But with such rocky terrain, the Air Ambulance is unable to land. Also in HD</desc>
        <title>The Real A &amp; E</title>
        <end>0700</end>
        <start>0630</start>
    </programme>
    <programme>
        <desc>Temperatures rise as big boss Ken and legions of angry bakers take to the streets to protest against the 'Pasty Tax', before Greggs faces its biggest-ever crisis. (S1, ep 4) Also in HD</desc>
        <title>Greggs: More Than Meats The Pie</title>
        <end>0800</end>
        <start>0700</start>
    </programme>
    <programme>
        <subtitle>That's Lobstertainment</subtitle>
        <desc>Bender and Zoidberg travel to Hollywood in search of stardom. (S3, ep 8)</desc>
        <title>Futurama</title>
        <end>0830</end>
        <start>0800</start>
    </programme>
    <programme>
        <subtitle>The Birdbot Of Ice-Catraz</subtitle>
        <desc>Leela fights to save the lives of penguins after the Planet Express ship is involved in an oil spill on Pluto. (S3, ep 9)</desc>
        <title>Futurama</title>
        <end>0900</end>
        <start>0830</start>
    </programme>

我正在使用jQuery和$ajax来检索xml代码。jQuery如下所示：

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
        dataType: "xml",
        cache: false,
        success: parseXml2
    });
});
function parseXml2(Xml)
{
    $(Xml).find("programme").each(function() {
        $("#titl").append($(this).find("title").text());
    });
}

然后 html 作为输出： 

                <table style="width:100%">
  <tr>
    <td>The Real A & E</td>
    <td>Greggs: More than meets the pie</td> 
    <td>Futurama</td>
  </tr>
</table>

主要问题是显示的文本是所有标题，而不仅仅是表格某个区域中一个程序的一个标题。任何帮助将不胜感激！

以下是在

表格中放置唯一标题的方法：

function parseXml2(Xml) {
    var table = $('<table/>'),
        tbody = $('<tbody/>'),
        tr = $('<tr/>'),
        td = $('<td/>'),
        titles = [];
    $(Xml).find("programme").each(function() {
        var title = $(this).find("title").text();
        if( titles.indexOf( title ) === -1 ) {
            tr.append( td.clone().html( title ) );
            titles.push( title );
        }
    });
    $("#titl").append( table.html( tbody.html( tr ) ) );
}


function parseXml2(Xml) {
        var table = $('<table border="1" cellpadding="3" cellspacing="0"/>'),
            tbody = $('<tbody/>'),
            tr = $('<tr/>'),
            td = $('<td/>'),
            titles = [];
        //this part create the table cells
        $(Xml).find("programme").each(function() {
            var title = $(this).find("title").text();
            if( titles.indexOf( title ) === -1 ) {
                tbody.append( tr.clone().html( td.clone().html( title ) ) );
                titles.push( title );
            }
        });
        //this part creates the table and puts the table cells in it and appends the 
        //table to the #titl element
        $("#titl").append( table.html( tbody ) );
    }
//JUST FOR DEMO PURPOSES
var xml = '<?xml version="1.0" encoding="UTF-8"?>'
<channel id="sky_one" source="Sky" date="25/11/2014">'
    <programme>'
        <desc>Tony''s motorcycle bursts into flames between his legs while town planner Liz is left in agony after her half-tonne horse bolts and lands on top of her. Also in HD</desc>'
        <title>The Real A &amp; E</title>'
        <end>0630</end>'
        <start>0600</start>'
    </programme>'
    <programme>'
        <desc>When Justin tries to detach a winch rope from a rock face during a charity event, a loose boulder falls on his pelvis. But with such rocky terrain, the Air Ambulance is unable to land. Also in HD</desc>'
        <title>The Real A &amp; E</title>'
        <end>0700</end>'
        <start>0630</start>'
    </programme>'
    <programme>'
        <desc>Temperatures rise as big boss Ken and legions of angry bakers take to the streets to protest against the ''Pasty Tax'', before Greggs faces its biggest-ever crisis. (S1, ep 4) Also in HD</desc>'
        <title>Greggs: More Than Meats The Pie</title>'
        <end>0800</end>'
        <start>0700</start>'
    </programme>'
    <programme>'
        <subtitle>That''s Lobstertainment</subtitle>'
        <desc>Bender and Zoidberg travel to Hollywood in search of stardom. (S3, ep 8)</desc>'
        <title>Futurama</title>'
        <end>0830</end>'
        <start>0800</start>'
    </programme>'
    <programme>'
        <subtitle>The Birdbot Of Ice-Catraz</subtitle>'
        <desc>Leela fights to save the lives of penguins after the Planet Express ship is involved in an oil spill on Pluto. (S3, ep 9)</desc>'
        <title>Futurama</title>'
        <end>0900</end>'
        <start>0830</start>'
    </programme>'
        </channel>',
          xmlDoc = $.parseXML( xml );
parseXml2( xmlDoc );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="titl"></div>

相关文章：