Question

我需要在表格中有一个可点击的单元格，因此它会显示电视节目的描述。我把它放在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>

XML示例

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

XML将创建表并引入数据的问题，但我不知道如何实现模式以显示XML中的描述任何帮助都会很棒。

Answer 1

您可以将要在模式中显示的信息作为数据属性添加到每个<td> - 例如像这样：

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

并为每个可点击的<td>添加一个类，或者点击是否设置了此数据属性：

$("td").on("click", function (e) {
  e.stopPropagation();
  if($(this).data("desc")){
    modal($(this).data("desc"));
  }
});

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

供参考：http://api.jquery.com/data/

更新：对于上述要求，点击td点击{+ 1}}从XML获取模态说明：

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");
    }
  });
});

已调整但无法正常工作Fiddle - 无法正常工作，因为因为CORS，XML（即使引用为绝对URL）也无法从那里读取。 XML必须与读取XML的页面位于同一个域中，因此出于测试目的，我只是将其上传到测试服务器并且它正在工作，使用绝对URL到XML以及XML旁边的XML时使用相对URL 作为解释 - 每个tr都有类programm，点击带有索引＆gt;的td 0（作为索引为0的第一个td是时间）使用单击的loadXml()作为参数的desc + index调用函数td。成功时，调用parseXml()，检索描述文本（例如Desc2）并使用检索到的文本调用modal()函数。
我只是将此作为您提供的XML的示例，因为您将有更多条目，例如对于<TVShows id="2">下的下一个时段，您可以对此进行调整，以便将点击的tr的数量/索引与programm类考虑在内。

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

1 个答案: