Javascript 从多个xml文件中检索特定信息并输出到html页面

场景是，我有一个TV listings html页面，其中包含一个由XML数据填充的电视节目标题表。我希望用户能够单击程序标题并获得标题的描述，该标题也来自同一个XML文件

我以前尝试过使用

.dialog

，但无法实现此功能。我现在打开一个单独的、较小的窗口，其中给出了一个程序和一个程序的标题。这不是我想要的，我想所有的标题链接到自己的描述

这是适用于一个程序的

JavaScript

代码（我宁愿在

jQuery

中使用它）：

所需的输出是通道列表上每个程序的描述（每个XML文件是一个通道）。任何帮助都将不胜感激

编辑

我现在已经能够为无序列表实现

.dialog

功能，尽管我无法在实际的html页面中实现它。我正在从XML创建一个HTML表，然后尝试实现

。dialog

功能这是我对该表的jQuery：

//sky one
            sky1p.each(function(k, v) {
                tr.clone().html( td.clone().html( $(this).find('start').text() ) )
                .append( td.clone().html('<div data-xml-id="' + k + '">' + '<div id="tvlistingssky1">' + $(v).find('title').text() + '</div> </div>') )
                .data( 'time', $(this).find('start').text() )
                .appendTo( tbody );
            });

//天空一号
sky1p.每个功能（k，v）{
tr.clone（）.html（td.clone（）.html（$（this.find（'start'）.text（））
.append（td.clone（）.html（“”+“”+$（v）.find（'title'）.text（）+“”））
.data（'time'，$（this）.find（'start'）.text（））
.附件（t正文）；
});

这是对话框的jquery：

 var xml;

    $(document).ready(function() {

      // init dialog
      $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        show: "blind",
        hide: "blind",
        open: function() {
              $('.ui-widget-overlay').on('click', function() {
                  $('#dialog').dialog('close');
              });
          }
      });

      // load xml doc and append parsed plant names to html document
    $.ajax({
      type: "GET",
      url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
      dataType: "xml"
    }).done($('#tvlistingssky1').on('click', 'div', function() { // show dialog on click

    })

      var programme = $(this),
        progId = programme.data('xmlId'),
        title = xml.find('programme').eq(progId).find('title').text(),
        description = xml.find('programme').eq(progId).find('desc').text();

      $('#dialog').html('<h1>' + title + '</h1> <br />' + "Description: '" + programme.text() + "' is " + description)
            .dialog('open');

    });

    });

var-xml；
$（文档）.ready（函数（）{
//初始化对话框
$（'#dialog'）。dialog({
自动打开：错误，
莫代尔：是的，
表演：“盲人”，
隐藏：“盲”，
打开：函数（）{
$（'.ui小部件覆盖'）。在（'click'，function（）上{
$（'dialog'）。dialog（'close'）；
});
}
});
//加载xml文档并将解析后的植物名称附加到html文档中
$.ajax({
键入：“获取”，
url:“https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml“，
数据类型：“xml”
}).done（$（'#tvlistingssky1'）。在（'click'，'div'，function（）{//单击时显示对话框
})
var计划=$（本），
progId=program.data（'xmlId'），
title=xml.find（'program'）.eq（progId）.find（'title'）.text（），
description=xml.find（'program'）.eq（progId）.find（'desc'）.text（）；
$（“#dialog”）.html（“+title+”
“+”说明：“+program.text（）+”是“+Description”）
.对话框（“打开”）；
});
});

---

如果有人能提供帮助，因为唯一显示的是对话框指针，而不是实际的对话框，那就太好了

您仍然可以使用

.dialog

。我想这样做：

加载和解析XML文档（我们为其保留引用）并将对象附加到文档中

附加附加对象的“onclick”侦听器，以便我们以后可以查询XML文档中所需的数据

构造jQuery对话框以显示XML文档中的查询数据

---

类似于HTML和XML数据。

感谢@r00m的帮助，我尝试了实现这个解决方案，并让它用于有序列表，尽管我似乎无法使它用于div。我使用了代码：`sky1p.each（function（k，v）{tr.clone（）.HTML（td.clone（）.HTML（$（this.find（'start'）.text（）））.append（td.clone（）.html（''+'+$（v）.find（'title'）.text（）+''））.data（'time'，$（this.find（'start'）.text（））.appendTo（tbody）；}）；`你能帮我吗？

//sky one
            sky1p.each(function(k, v) {
                tr.clone().html( td.clone().html( $(this).find('start').text() ) )
                .append( td.clone().html('<div data-xml-id="' + k + '">' + '<div id="tvlistingssky1">' + $(v).find('title').text() + '</div> </div>') )
                .data( 'time', $(this).find('start').text() )
                .appendTo( tbody );
            });

 var xml;

    $(document).ready(function() {

      // init dialog
      $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        show: "blind",
        hide: "blind",
        open: function() {
              $('.ui-widget-overlay').on('click', function() {
                  $('#dialog').dialog('close');
              });
          }
      });

      // load xml doc and append parsed plant names to html document
    $.ajax({
      type: "GET",
      url: "https://scm.ulster.ac.uk/~B00533474/workspace/COM554/assignment_2/CR/sky_one.xml",
      dataType: "xml"
    }).done($('#tvlistingssky1').on('click', 'div', function() { // show dialog on click

    })

      var programme = $(this),
        progId = programme.data('xmlId'),
        title = xml.find('programme').eq(progId).find('title').text(),
        description = xml.find('programme').eq(progId).find('desc').text();

      $('#dialog').html('<h1>' + title + '</h1> <br />' + "Description: '" + programme.text() + "' is " + description)
            .dialog('open');

    });

    });