Javascript 表必须具有可单击的单元格才能显示XML文件中的更多选项

我需要在一个表中有一个可点击的单元格，这样它就会显示一个电视节目的描述。我在XML中输入了一个名为“tvGuide1”的表，一个类似工具提示的函数显示了一个简短的描述。XML将使用XML中的前5个元素创建第一行

<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>

$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“MonWedSatXML.xml”，
cache:false，
成功：函数（xml）{
$（xml）。查找（“#1、#2、#3、#4、#5、#6、#7、#8、#9、#10、#11、#13、#14、#15、#16”）。每个函数（）{
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（）；
$（“”）.html（“”+Time+”您可以将要在模式中显示的信息作为数据属性添加到每个
-例如：

<td data-desc="Hilarious show about a modern family">Family Guy</td>

使用自编模式函数或现有解决方案。例如，我刚刚使用简单模式函数创建了一个，并设置了前三个条目的数据。如果您有更多信息要显示在模式中，可以将其添加为另一个数据属性。这只是一个示例，因为您已经设置了hort description as
title
-标记我想XML中还有一个更长的描述，您只想在模式中显示

供参考：

更新：对于上述从XML中获取模态描述的要求，请单击
td
-以下方法：

function loadXml(item) {
  $.ajax({
    type: "GET",
    url: 'programs.xml',
    dataType: "xml",
    success: function (xml) {
        parseXml(xml, item);
    }
  });
}

function parseXml(xml, item) {
  var $xml = $(xml),
      desc = $xml.find(item).text();
  modal(desc);
}

function modal(desc) {
  $("body").addClass("inactive");
  $("#modal").text(desc).show();
}
$(document).ready(function () {
  $(".programm td").on("click", function (e) {
    e.stopPropagation();
    var col = $(this).parent().children().index($(this));
    if (col > 0) {
        loadXml("Desc" + col);
    }

  });
  $("body").on("click", function (e) {
    if (!$("#modal").is(e.target)) {
        $("#modal").hide();
        $("body").removeClass("inactive");
    }
  });
});

已调整但不起作用-不起作用，因为XML（即使被引用为绝对URL）由于CORS，从那里无法读取。XML必须与读取XML的页面位于同一个域中，因此出于测试目的，我刚刚将其上传到testserver上，它正在工作，使用XML的绝对URL，以及在XML位于HTML旁边时使用相对URL。

作为说明-每个
tr
都有类
program
，单击索引为0的
td
（因为索引为0的第一个
td
是时间）调用函数
loadXml（）
，并将单击的
td
的desc+索引作为参数。成功后，
parseXml（）调用
，检索描述文本（如Desc2），并使用检索到的文本调用
modal（）
函数。

我只是为您提供的XML编写了一个示例，因为您将有更多的条目，例如，对于
下的下一个时间段，您可以调整此值，以将类
programm
中单击的
tr
的数量/索引考虑在内。
硬编码所有这些条目都会太耗时，因为它是一个电视指南，所以我不会我希望能够点击节目的标题，然后从XML（描述）中提取数据。这是一个我已经考虑过的想法，但我不知道如何编写代码从XML中提取数据：-/@毫不留情，可以理解，所以我刚刚更新了我的答案。
$("td").on("click", function (e) {
  e.stopPropagation();
  if($(this).data("desc")){
    modal($(this).data("desc"));
  }
});

function loadXml(item) {
  $.ajax({
    type: "GET",
    url: 'programs.xml',
    dataType: "xml",
    success: function (xml) {
        parseXml(xml, item);
    }
  });
}

function parseXml(xml, item) {
  var $xml = $(xml),
      desc = $xml.find(item).text();
  modal(desc);
}

function modal(desc) {
  $("body").addClass("inactive");
  $("#modal").text(desc).show();
}
$(document).ready(function () {
  $(".programm td").on("click", function (e) {
    e.stopPropagation();
    var col = $(this).parent().children().index($(this));
    if (col > 0) {
        loadXml("Desc" + col);
    }

  });
  $("body").on("click", function (e) {
    if (!$("#modal").is(e.target)) {
        $("#modal").hide();
        $("body").removeClass("inactive");
    }
  });
});