2014-12-06 74 views
0

更新:我现在仍坚持这一代码没有出现在点击一个对话框: 现在的问题是,标题被点击时没有任何反应。有任何想法吗?数据在那里,当我拿走.hidden css类时,我可以看到它。.Dialog没有显示在表格单元格单击

$(".showRow").click(function(){ 
    descId= $(this).data('id'); 
    $('#desc_'+descId).dialog({ 
     modal: true, 
     width: 500 
    }); 

}); 

我想提出一个电视指南,当标题被点击我想一个弹出与标题的描述显示单元,但是我只能让所有的描述中显示出来,并不仅仅是与标题相匹配的单独一个,我将如何去做这件事?

HTML

<table id="chart"> 
     <thead><th>Start</th><th>End</th><th>Title</th></thead><tbody><tr><td></td></tr></tbody> 
    </table> 
hidden { 
    display: none; 
} 

jQuery的

$.ajax({ 
     url: "xml/tvguide.xml" , 
     dataType: "xml" , 
     type: "GET", 
     success: function(data) { 
      rowNum = 1; 
      $(data).find('tvguide channel[id="bbconemonday"] programme').each(function() { 

      var title = $(this).find('title').text(); 
      var desc = $(this).find('desc').text(); 
      var start = $(this).find('start').text(); 
      var end = $(this).find('end').text(); 
      $('<tr data-id="'+rowNum+'" class="showRow"></tr>').html('<td>'+start+'</td><td>'+end+'</td><td title="'+desc+'">'+title+'<div class="hidden" id="desc_'+rowNum+'">'+desc+'</div></td>').appendTo('#chart'); 
      rowNum++ 

     }); 

XML样本

<tvguide> 
    <channel id="bbconemonday"> 
    <programme> 
<desc> 
The latest news, sport, business and weather from the BBC's Breakfast team. Also in HD. [S] Including regional news at 25 and 55 minutes past each hour. 
</desc> 
<title>Breakfast</title> 
<end>0915</end> 
<start>0600</start> 
</programme> 
<programme> 
<desc> 
13/20. Matt Allwright investigates the activities of conmen, revealing the fake batteries being used in mobile phones, cameras and laptops. Also in HD. [S] 
</desc> 
<title>Fake Britain</title> 
<end>1000</end> 
<start>0915</start> 
</programme> 
<programme> 
<desc> 
Martin Roberts and Lucy Alexander visit a cottage in Devon, a ground floor flat in London and a house in Lancashire. They find out how much each went for at auction. [S] 
</desc> 
<title>Homes Under the Hammer</title> 
<end>1100</end> 
<start>1000</start> 
</programme> 
<programme> 
<desc> 
8/10. Series which sees insurance fraudsters caught on camera. A convicted drug dealer thinks a bump on the head will give him a bumper payout. Also in HD. [S] 
</desc> 
<title>Claimed and Shamed</title> 
<end>1130</end> 
<start>1100</start> 
</programme> 
<programme> 
<desc> 
8/10. Documentary following life on the English Channel. A band of eco-fishermen from Weymouth help preserve the channel's fish stocks by using traditional fishing methods. Also in HD. [S] 
</desc> 
<title>Channel Patrol</title> 
<end>1215</end> 
<start>1130</start> 
</programme> 
<programme> 
<subtitle>Horncastle</subtitle> 
<desc> 
Tim Wonnacott and the teams hunt for bargains in the historic town of Horncastle, and Tim pays a visit to the Birmingham Museum and Art Gallery. Also in HD. [AD,S] 
</desc> 
<title>Bargain Hunt</title> 
<end>1300</end> 
<start>1215</start> 
</programme> 
<programme> 
<desc> 
The latest national and international news stories from the BBC News team, followed by weather. Also in HD. [S] 
</desc> 
<title>BBC News at One</title> 
<end>1330</end> 
<start>1300</start> 
</programme> 
<programme> 
<desc> 
The latest news, sport and weather from London. [S] 
</desc> 
<title>BBC London News</title> 
<end>1345</end> 
<start>1330</start> 
</programme> 
<programme> 
<subtitle>Victim</subtitle> 
<desc> 
Drama series. A seemingly straightforward home visit takes an incredibly dark turn for Niamh. The documentary filming doesn't go to plan for Howard. Also in HD. [AD,S] 
</desc> 
<title>Doctors</title> 
<end>1415</end> 
<start>1345</start> 
</programme> 
<programme> 
<desc> 
8/10. The Ties of the Past: A life model is found murdered at the start of a painting class. Also in HD. [AD,S] 
</desc> 
<title>The Doctor Blake Mysteries</title> 
<end>1510</end> 
<start>1415</start> 
</programme> 
<programme> 
<subtitle>West of Scotland</subtitle> 
<desc> 
Nicki Chapman travels through the west of Scotland, helping an animal-loving couple find their perfect country home. While there, Nicki tries her hand at curling. Also in HD. [AD,S] 
</desc> 
<title>Escape to the Country</title> 
<end>1555</end> 
<start>1510</start> 
</programme> 
<programme> 
<desc> 
3/6. Celebratory Food: Recipes include slow roast duck with aromatic crispy skin, and gin and tonic granita. Also in HD. [AD,S] 
</desc> 
<title>Tom Kerridge's Proper Pub Food</title> 
<end>1625</end> 
<start>1555</start> 
</programme> 
<programme> 
<desc> 
7/23. Tavistock: Paul Martin and the team visit sunny Tavistock where Phillip Serrell and Charlie Ross examine people's heirlooms. Paul takes a look around Endsleigh Gardens, just down the road. [S] 
</desc> 
<title>Flog It!</title> 
<end>1715</end> 
<start>1625</start> 
</programme> 
<programme> 
<desc> 
Quiz in which contestants try to score as few points as possible by plumbing the depths of their general knowledge to come up with the answers no-one else can think of. Also in HD. [S] 
</desc> 
<title>Pointless</title> 
<end>1800</end> 
<start>1715</start> 
</programme> 
<programme> 
<desc> 
The latest national and international news stories from the BBC News team, followed by weather. Also in HD. [S] 
</desc> 
<title>BBC News at Six</title> 
<end>1830</end> 
<start>1800</start> 
</programme> 
<programme> 
<desc> 
The latest news, sport and weather from London. [S] 
</desc> 
<title>BBC London News</title> 
<end>1900</end> 
<start>1830</start> 
</programme> 
<programme> 
<desc> 
If it's got Britain talking then it will get talked about on The One Show. Presented by Matt Baker and Alex Jones. Also in HD. [S] Then BBC News. 
</desc> 
<title>The One Show</title> 
<end>2000</end> 
<start>1900</start> 
</programme> 
<programme> 
<desc> 
8/20. School-based drama. Allie convinces Vaughan to send Justin to a boarding school in an attempt to keep him away from Tiffany but the young lovers have plans of their own. Also in HD. [AD,S] 
</desc> 
<title>Waterloo Road</title> 
<end>2100</end> 
<start>2000</start> 
</programme> 
<programme> 
<desc> 
9/14. Ten Years of Discount Buying: To test their negotiation skills, the candidates must buy nine items which have featured in previous years' tasks at the best possible prices. Also in HD. [S] 
</desc> 
<title>The Apprentice</title> 
<end>2200</end> 
<start>2100</start> 
</programme> 
    </channel> 
    </tvguide> 

编辑:添加在Silverhunter代码。还停留在。点击

+0

你可以张贴XML的更大的块?一个包含多个程序段中的ID =“bbconmonday” – silversunhunter 2014-12-06 22:46:53

回答

1

如果每个功能正在与一个数据项每次迭代中正确地传播你的表行,那么我会尝试以下。

设置一个隐藏的div来包含你的描述。建立一个叫做隐藏类在你的CSS

.hidden { 
    display: none; 
} 

添加隐藏的div你的附加表行中,并补充说,我们可以在我们的ID使用的标识符。我把它称为rowNum。我们用rowNum来标识我们的描述div。为了让系统知道它描述div来展现我们还将把的rowNum在我们的TR数据属性要在点击检索。

$.ajax({ 
     url: "xml/tvguide.xml" , 
     dataType: "xml" , 
     type: "GET", 
     success: function(data) { 
      rowNum = 1; 
      $(data).find('tvguide channel[id="bbconemonday"] programme').each(function() { 

      var title = $(this).find('title').text(); 
      var desc = $(this).find('desc').text(); 
      var start = $(this).find('start').text(); 
      var end = $(this).find('end').text(); 
      $('<tr data-id="'+rowNum+'" class="showRow"></tr>').html('<td>'+start+'</td><td>'+end+'</td><td title="'+desc+'">'+title+'<div class="hidden" id="desc_'+rowNum+'">'+desc+'</div></td>').appendTo('#chart'); 
      rowNum++ 

     }); 
    }); 

设置您的Ajax函数之外的点击处理程序来处理单击的任何行。因为我们在具有我们需要的ID的tr中放入了一个数据属性,我们可以使用它来访问我们的描述div。

$("#chart").on('click', 'tr.showrow', function(){ 
    descId= $(this).data('id'); 
    $('#desc_'+descId).dialog({ 
     modal: true, 
     width: 500 
    }); 

}); 
+0

的。点击是没有做对我有什么想法什么?当我拿出隐藏的CSS类时,我可以看到数据。顺便说一句,你的帮助是非常感谢。 – yolad 2014-12-07 09:30:58

+0

@yolad由于user26409021表示.on()更适合在这里使用。我更新了我的答案。 – silversunhunter 2014-12-07 19:45:55

1

尝试使用insteaf click事件处理程序的on,像下面

$("table").on('click','.showRow',function(){ 
descId= $(this).data('id'); 
$('#desc_'+descId).dialog({ 
    modal: true, 
    width: 500 
}); 

});

+0

当我点击 – yolad 2014-12-07 12:03:27

+1

时,仍然没有任何东西它现在正在工作。我的表名错误,非常感谢。 – yolad 2014-12-07 12:05:45