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>&nbsp;&nbsp;&nbsp;</table>"
                $("#entrydata").append($table)
            });
        });
    });
</script>

上面的代码动态创建表并显示来自我的JSON文件的数据。我想将这些表格作为按钮并向这些表格添加弹出窗口，这样当单击一个表格时会出现一个弹出窗口，每个弹出窗口应该有不同的数据。任何解决方案都会有所帮助。提前谢谢。

Answer 1

主要技巧是将您的点击处理程序绑定到文档：

jcifs.Config.setProperty( "jcifs.smb.lmCompatibility", "3");

执行此操作将允许您动态创建表并仍然捕获其事件。

为了处理模态和弹出窗口，我建议只抓取其中一个可用的插件。我非常喜欢featherlight

Answer 2

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>

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

2 个答案: