Question

HTML

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>


<!--To display JSON data in the tables-->
        <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  class='mystyles' 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)
        });
    });
});

<!--Popup function-->
             $(function() {
    $( "#dialog" ).dialog();
  });

        </script>

    </head>
    <body>
               <div id="popup-box1" class="popup-position">
        <div id="popup-wrapper">
            <p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">X</a></p>
            <div id="popup-container">
                <h3>Popup box 1</h3>
                <p>A popup box</p>
            </div><!-- Popup container end -->
            <p style="text-align: right;"><a href="javascript:void(0)" >Close popup box</a></p>
        </div><!-- Popup wrapper popup end -->
    </div><!-- Popup box 1 end -->


        <!--Creating a dynamic table-->
          <a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">
              <div class="wrapper" >
                    <div class="profile">
                      <div id='entrydata' >

                        </div>
                  </div>
                </a>
          </div>

代码动态创建表并显示JSON数据。我添加了一个弹出窗口，但问题是我需要为每个表提供不同的弹出窗口。例如：对于第一个表我想弹出1，第二个表应该显示弹出2.由于这些表是动态创建的，我不知道如何向它添加不同的弹出窗口。任何解决方案将不胜感激。提前致谢

Answer 1

您可以像这样为表格分配唯一的ID。

<!--To display JSON data in the tables-->
        <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) {
                         var idx=1;
                         $.each(data.records, function(i, f) {
                             var myid = 'mytable'+String(idx);
                             idx++;
                             var $table="<table  id='"+myid+"' class='mystyles' 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)
                         });

                     });
                 });

如何为动态表

1 个答案: