顯示具體的數據

的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

顯示具體的數據

回答

相關問題