How to add pop-up window/modal to dynamically created tables

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

The above code creates tables dynamically and displays data from my JSON file. I want to make this tables as buttons and add pop up windows to these tables, such that when a table is clicked a pop-up appears and each pop up should have different data. Any solution to this would be helpful. Thanks in advance.


Source: New Questions

Leave a Reply