How to add pop-up window/modal to dynamically created tables
Question
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> </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.
2 answers
solution1
0 2015-05-14 09:17:44
The main trick is going to be binding your click handler to the document:
$(document).on("click", ".buttonInTd", function() {
/* give your buttons the 'buttonInTd' class and add your onclick code here */
});
Doing this will allow you to dynamically create a table and still capture its events.
To handle modals and popups I would recommend just grabbing one of the multitude of plugins available for that. I really like featherlight
solution2
0 2015-05-14 09:47:36
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.