Table must have clickable cells to display more options from XML file



I need to have a clickable cell within a table, so it will show a description of a TV show. I have it feeding in the XML to make the table called 'tvGuide1' and a tooltip like function shows a brief description. The XML create the first row with the first 5 elements within XML.



<script type="text/javascript">

$(document).ready(function()
{
$.ajax({
type: "GET",
url: "MonWedSatXML.xml",
cache: false,
success: function(xml){
$(xml).find('#1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16').each(function(){
var Time = $(this).find('Time').text();

dcs1 = $(this).find('Desc1').text();
dcs2 = $(this).find('Desc2').text();
dcs3 = $(this).find('Desc3').text();
dcs4 = $(this).find('Desc4').text();
dcs5 = $(this).find('Desc5').text();

var Program1 = $(this).find('Title1').text();
var Program2 = $(this).find('Title2').text();
var Program3 = $(this).find('Title3').text();
var Program4 = $(this).find('Title4').text();
var Program5 = $(this).find('Title5').text();

$('<tr></tr>').html('<th>'+Time+"</th><td Title='"+dcs1+"' <div onClick='info()'>"+Program1+"</td><td Title='"+dcs2+"'<div onClick='info()'>"+Program2+"</td><td Title='"+dcs3+"'<div onClick='info()'>"+Program3+"</td><td Title='"+dcs4+"'<div onClick='info()'>"+Program4+"</td><td Title='"+dcs5+"'>"+Program5+'</td>').appendTo('#tvGuide1');

});
}
});
$( "#tvGuide1" ).on("click","td", function(e){
console.log('hello');
$("#myModal").modal("show");
});
});
</script>


XML EXAMPLE



<Programs>
<TVShows id="1">
<Time>08:00</Time>
<Title1>Breakfast</Title1>
<Desc1>The latest news, sport, business and weather from the team. Also in HD. [S] Including regional news at 25 and 55 minutes past each hour.</Desc1>
<Title2>Fake Britain</Title2>
<Desc2>Matt Allwright investigates the activities of conmen, revealing the fake high-EndTimesome farmers' markets and looking at counterfeit bike parts.</Desc2>
<Title3>Family Guy</Title3>
<Desc3>Hilarious show about a modern family</Desc3>
<Title4>ITV News</Title4>
<Desc4>Your latest news, sport and weather</Desc4>
<Title5>Homes Under the Hammer</Title5>
<Desc5>People buy rubbish houses and give them a make over then sell them</Desc5>
</TVShows>

'<table id="tvGuide1">
<tr>
<th>Time 24hr Clock</th>
<th>BBC 1<img src="Channel1.png" style="width:150px;height:150px"></th>
<th>BBC 2<img src="Channel2.png" style="width:150px;height:150px"></th>
<th>Comedy Central<img src="ComedyCentral.png" style="width:150px;height:150px"></th>
<th>ITV<img src="Channel3.jpeg" style="width:150px;height:150px"></th>
<th>Channel 4<img src="Channel4.jpg" style="width:150px;height:150px"></th>
</tr>
</table>'


The problem the XML will create the table and pull in the data but I have no idea how to implement the modal to display the description from the XML Any help would be great.


No comments:

Post a Comment