显示具体的数据

的Javascript显示具体的数据

$(function() { 
    var dmJSON = "clues.json"; 
    $.getJSON(dmJSON, function(data) { 
     var idx=1; 
     $.each(data.details, function(i, f) { 
      var myid = 'mypop'+String(idx); 
      idx++; 
      var $popup="<popup id='"+myid+"' class='mystyles1'><tr>" + "<p>" + f.Myclue + "</p></tr>" + "<tr><p>" + f.Description + "</p></tr>" + "<tr><p>" + f.Updates + "</p></tr>" + "<tr><p> " + f.Users + "</p></tr>" + "&nbsp;&nbsp;&nbsp;</popup>" 
      $("#popup-container").append($popup) 
     }); 
    }); 
});

的Html

<div id="popup-box" class="popup-position"> 
    <div id="popup-wrapper"> 
     <p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box');">X</a></p> 
     <div id="popup-container"></div> 
    </div> 
</div>

有了这个代码，我试图显示弹出式窗口中的json数据。

JSON

{ 
"details": [ 
    { 
    "Myclue" : "First Clue", 
    "Description" : "Answer to the first clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Second Clue", 
    "Description" : "Answer to the second clue", 
    "Updates" : "Amazing", 
    "Users" : "15" 
    }, 
    { 
    "Myclue" : "Third Clue", 
    "Description" : "Answer to the third clue", 
    "Updates" : "Spectacular", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Fourth Clue", 
    "Description" : "Answer to the fourth clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Fifth Clue", 
    "Description" : "Answer to the fifth clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Sixth Clue", 
    "Description" : "Answer to the sixth clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Seventh Clue", 
    "Description" : "Answer to the seventh clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Eigth Clue", 
    "Description" : "Answer to the eigth clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Nintht Clue", 
    "Description" : "Answer to the ninth clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    }, 
    { 
    "Myclue" : "Tenth Clue", 
    "Description" : "Answer to the ninth clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    } 
] 
}

但问题是整个数据在单个弹出显示。但是我想实现的是，我希望每个数据集都能在不同的弹出窗口中显示。对于前：这组数据应该在另一个弹出

{ 
    "Myclue" : "Second Clue", 
    "Description" : "Answer to the second clue", 
    "Updates" : "Amazing", 
    "Users" : "15" 
    },

显示在一个弹出

{ 
    "Myclue" : "First Clue", 
    "Description" : "Answer to the first clue", 
    "Updates" : "Rejected", 
    "Users" : "10" 
    },

那么，这第二组.....等等。我不知道我的错误是什么，因为当点击表格并动态创建表格时，弹出窗口会出现。请帮我解决这个问题。

来源

2015-05-20 Loretta V

你能不能给用（生成）表更多的HTML代码，以及如何显示弹出？现在，您只需在页面加载的弹出式容器中生成所有弹出式内容。 – Peter

每组数据要在不同的弹出窗口中显示。唯一的问题是每个人都有相同的ID，即mypop1。您可以使用下面给出唯一的ID通过检查元素的

$(function() { 
    var dmJSON = "clues.json"; 
    $.getJSON(dmJSON, function(data) { 
     $.each(data.details, function(i, f) { 
      var myid = 'mypop'+ (i+1); // if you want to start id's from '1' 
      var $popup="<popup id='"+myid+"' class='mystyles1'><tr>" + "<p>" + f.Myclue + "</p></tr>" + "<tr><p>" + f.Description + "</p></tr>" + "<tr><p>" + f.Updates + "</p></tr>" + "<tr><p> " + f.Users + "</p></tr>" + "&nbsp;&nbsp;&nbsp;</popup>" 
      $("#popup-container").append($popup) 
     }); 
    }); 
});

Demo你可以看到每个data对象在不同<popup></popup>

来源

2015-05-20 08:59:04 ozil

显示具体的数据

回答

相关问题