I am trying to display separate xml elements in a html table. Below is my 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 & 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 & 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>
I am using the jQuery and $ajax to retrieve the xml code. The jQuery is shown below:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://ift.tt/1w8bzVv",
dataType: "xml",
cache: false,
success: parseXml2
});
});
function parseXml2(Xml)
{
$(Xml).find("programme").each(function() {
$("#titl").append($(this).find("title").text());
});
}
Then html as the output:
<html>
<head>
<title> Day to Day TV </title>
<!-- In page scripts -->
<script type="text/JavaScript">
<!-- Begin
function ch1prog1()
{
window.open('description.html','ch1prog1','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars=yes,width=700,height=500');
}
//-->
</script>
</head>
<body>
<center><h1> Day to Day TV </h1></center>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active"><a href="#Mon" data-toggle="tab">Monday</a></li>
<li class="nav"><a href="#Tue" data-toggle="tab">Tuesday</a></li>
<li class="nav"><a href="#Wed" data-toggle="tab">Wednesday</a></li>
<li class="nav"><a href="#Thur" data-toggle="tab">Thursday</a></li>
<li class="nav"><a href="#Fri" data-toggle="tab">Friday</a></li>
<li class="nav"><a href="#Sat" data-toggle="tab">Saturday</a></li>
<li class="nav"><a href="#Sun" data-toggle="tab">Sunday</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="Mon">
<table border="1" frame="void" rules="all" id="table" class="table">
<colgroup>
<col class="time" />
<col class="col2" />
<col class="col1" />
<col class="col2" />
<col class="col1" />
<col class="col2" />
<col class="col1" />
</colgroup>
<thead>
<tr>
<td colspan="7" class="col2">Date: 27 October 2014</td>
</tr>
<tr>
<th> </th>
<th>Sky One</th>
<th>Channel 2</th>
<th>Channel 3</th>
<th>Channel 4</th>
<th>Channel 5</th>
<th>Channel 6</th>
</tr>
</thead>
<tfoot>
<th> </th>
<th>Channel 1</th>
<th>Channel 2</th>
<th>Channel 3</th>
<th>Channel 4</th>
<th>Channel 5</th>
<th>Channel 6</th>
</tfoot>
<tbody>
<tr>
<td class="time">09:00</td>
<td rowspan="2"><a href="JavaScript: ch1prog1()" onMouseOver="window.status='Status Bar Message'; return true" onMouseOut="window.status=''; return true" title="descritpion">
<span class="start">09:00</span><br /><div id="titl"> Programme 1 </div></a>
</td>
<td>Programme 1</td>
<td>Programme 1</td>
<td rowspan="3">Programme 1</td>
<td>Programme 1</td>
<td>Programme 1</td>
</tr>
<tr>
<td class="time">10:00</td>
<td>Programme 2</td>
<td>Programme 2</td>
<td>Programme 2</td>
<td>Programme 2</td>
</tr>
<tr>
<td class="time">11:00</td>
<td><a href="JavaScript: ch1prog1()" onMouseOver="window.status='Status Bar Message';
return true" onMouseOut="window.status=''; return true" title="descritpion">
<span class="start">11:00</span><br /> Programme 2</a>
</td>
<td>Programme 3</td>
<td rowspan="3">Programme 3</td>
<td>Programme 3</td>
<td>Programme 3</td>
</tr>
<tr>
<td class="time">12:00</td>
<td>Programme 4</td>
<td rowspan="2">Programme 4</td>
<td>Programme 4</td>
<td>Programme 4</td>
<td>Programme 4</td>
</tr>
<tr>
<td class="time">13:00</td>
<td rowspan="4">Programme 5</td>
<td>Programme 5</td>
<td>Programme 5</td>
<td>Programme 5</td>
</tr>
<tr>
<td class="time">14:00</td>
<td>Programme 6</td>
<td>Programme 6</td>
<td>Programme 6</td>
<td>Programme 6</td>
<td>Programme 6</td>
</tr>
<tr>
<td class="time">15:00</td>
<td rowspan="2">Programme 7</td>
<td>Programme 7</td>
<td>Programme 7</td>
<td>Programme 7</td>
<td>Programme 7</td>
</tr>
<tr>
<td class="time">16:00</td>
<td rowspan="2">Programme 8</td>
<td>Programme 8</td>
<td>Programme 8</td>
<td>Programme 8</td>
</tr>
<tr>
<td class="time">17:00</td>
<td>Programme 8</td>
<td>Programme 8</td>
<td>Programme 8</td>
<td>Programme 8</td>
<td>Programme 8</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="Tue">Content inside Tuesday</div>
<div class="tab-pane fade" id="Wed">Content inside Wednesday</div>
<div class="tab-pane fade" id="Thur">Content inside Thursday</div>
<div class="tab-pane fade" id="Fri">Content inside Friday</div>
<div class="tab-pane fade" id="Sat">Content inside Saturday</div>
<div class="tab-pane fade" id="Sun">Content inside Sunday</div>
</div>
</div>
</body>
<script src="http://ift.tt/1g1yFpr"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="js/tvguideja.js"></script>
</html>
The main problem is that the text which is displayed is all of the titles rather than just one title for one program in one area of the table. Any help would be much appreciated!
No comments:
Post a Comment