2014-12-06 32 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

相關問題