如何添加弹出窗口/模式，动态创建的表

问题描述：

<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文件创建动态表和显示数据。我想将这些表格作为按钮并将弹出窗口添加到这些表格中，以便在单击表格时出现弹出窗口，并且每个弹出窗口都应该具有不同的数据。任何解决这个问题都会有所帮助。提前致谢。

至少告诉我们你尝试过什么 – madalinivascu

在HTML中，有没有这样的，因为“模式弹出”（除了丑警报（））。您可以在顶部显示灰色，半透明，全宽和全高图像以灰化现有内容，并在弹出内容的顶部显示div。我敢打赌，为此目的有很多JQuery模块。 – ern0

你是否要求另一个点击ajax调用，并在弹出窗口中显示日期为表格？ –

答

主要的窍门是要你的点击处理程序被绑定到文档：

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

这样做将允许你动态地创建一个表，仍然捕捉其事件。

要处理模态和弹出窗口，我建议只抓取可用于此的众多插件之一。我真的很喜欢featherlight

答

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>

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

我的错误是，您添加到DOM后绑定。 – jcuenod

如何添加弹出窗口/模式，动态创建的表

相关推荐