如何添加彈出窗口/模式，動態創建的表

HTML如何添加彈出窗口/模式，動態創建的表

<div class="wrapper"> 
    <div class="profile"> 
     <div id='entrydata'></div> 
    </div> 
</div>

的Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script> 
    $(function() { 
     var dmJSON = "data.json"; 
     $.getJSON(dmJSON, function(data) { 
      $.each(data.records, function(i, f) { 
       var $table = "<table border=5><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody>&nbsp;&nbsp;&nbsp;</table>" 
       $("#entrydata").append($table) 
      }); 
     }); 
    }); 
</script>

上面的代碼從我的JSON文件創建動態表和顯示數據。我想將這些表格作爲按鈕並將彈出窗口添加到這些表格中，以便在單擊表格時出現彈出窗口，並且每個彈出窗口都應該具有不同的數據。任何解決這個問題都會有所幫助。提前致謝。

來源

2015-05-14 Loretta V

至少告訴我們你嘗試過什麼 – madalinivascu

在HTML中，有沒有這樣的，因爲「模式彈出」（除了醜警報（））。您可以在頂部顯示灰色，半透明，全寬和全高圖像以灰化現有內容，並在彈出內容的頂部顯示div。我敢打賭，爲此目的有很多JQuery模塊。 – ern0

你是否要求另一個點擊ajax調用，並在彈出窗口中顯示日期爲表格？ –

主要的竅門是要你的點擊處理程序被綁定到文檔：

$(document).on("click", ".buttonInTd", function() { 
    /* give your buttons the 'buttonInTd' class and add your onclick code here */ 
});

這樣做將允許你動態地創建一個表，仍然捕捉其事件。

要處理模態和彈出窗口，我建議只抓取可用於此的衆多插件之一。我真的很喜歡featherlight

來源

2015-05-14 09:17:44 jcuenod

HTML：

<html> 

    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 

     </script> 
     <script> 
      $(document).ready(function() { 
       $(function() { 
        var dmJSON = "data.json"; 
        $.getJSON(dmJSON, function(data) { 
         var $count = 0; 
         $.each(data.records, function(i, f) { 
          var $table = "<button type='button' class='show_btn'>show table" + ++$count + "</button><br><table border=1 class='table_hide'><tbody><tr>" + "<td>" + f.Clue + "</td></tr>" + "<tr><td>" + f.Answer + "</td></tr>" + "<tr><td>" + f.Status + "</td></tr>" + "<tr><td> " + f.Views + "</td></tr>" + "</tbody></table>" 
          $("#entrydata").append($table) 
         }); 
         $(".show_btn").click(function() { 
          $(this).next().next().show() 
          $(this).hide(); 
         }); 
        }); 
       }); 
      }); 
     </script> 
     <style> 
      .table_hide { 
       display :none; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="wrapper"> 
      <div class="profile"> 
       <div id='entrydata'></div> 
      </div> 
     </div> 
    </body> 

</html>

來源

2015-05-14 09:47:36

@ jcuenod它在我的最後工作正常。 –

我的錯誤是，您添加到DOM後綁定。 – jcuenod

如何添加彈出窗口/模式，動態創建的表

回答

相關問題