將Json數據分配給HTML單元格

我有一個返回Json格式字符串的Jquery函數，我想將Json數據分配給HTML單元格。我該如何繼續這樣做呢？我嘗試使用Json2HTML庫，但似乎不適合我。將Json數據分配給HTML單元格

var jsonData: [{"PlayerName": xxx, "Site": yyy, "Score":zzz}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}]

的Default.aspx：

<div style="position: relative; top: 25px; height: 720px"> 
     <div style="position: relative; height: 720px; width: 710px;"> 
      <div class="TopScore" style="position: relative; left: 50px"> 
       <table class="table"> 
        <tr> 
         <td class="RankColumn">1</td> 
         <td class="PlayernameColumn"></td> 
         <td class="Site"></td> 
         <td class="Score"></td> 
        </tr> 
       </table> 
      </div> 
      <div class="ScoreBlueBackground" style="position: relative; top: 5px; left: 100px"> 
       <table class="table"> 
        <tr> 
         <td class="rankColumn">2</td> 
         <td class="playername"></td> 
         <td class="siteName"></td> 
         <td class="score"></td> 
        </tr> 
       </table> 
      </div> 
. 
. 
. 
. 
. 
. 
. 
      <div class="ScoreBlueBackground" style="position: relative; top: 5px; left: 100px"> 
       <table class="table"> 
        <tr> 
         <td class="rankColumn">20</td> 
         <td class="playername"></td> 
         <td class="siteName"></td> 
         <td class="score"></td> 
        </tr> 
       </table> 
      </div>

來源

2017-07-04 Sugan88

模板庫可能會讓您輕鬆完成任務。我會看看[Handlebars.js]（http://handlebarsjs.com/） – NTL

肯定會嘗試！謝謝:) – Sugan88

一種方法可能是使用jquery動態構建DOM元素。

var jsonData = [ 
 
    {"PlayerName": "aaa", "Site": "s11", "Score": "100"}, 
 
    {"PlayerName": "bbb", "Site": "s12", "Score": "99"}, 
 
    {"PlayerName": "ccc", "Site": "s13", "Score": "34"}, 
 
    {"PlayerName": "ddd", "Site": "s14", "Score": "12"}, 
 
    {"PlayerName": "eee", "Site": "s15", "Score": "68"} 
 
]; 
 

 
var dom_top_score = $('<div class="TopScore"><div>'); 
 
var dom_score_blue_background = $('<div class="ScoreBlueBackground"></div>'); 
 

 
for(var i = 0; i < jsonData.length; i++){ 
 

 
    var player_name = jsonData[i].PlayerName; 
 
    var site = jsonData[i].Site; 
 
    var score = jsonData[i].Score; 
 
    var ranking = i + 1; 
 
    
 
    var parent_dom = null; 
 
    var dom_table = '<table class="table"><tr><td class="RankColumn">' + ranking + '</td><td class="PlayernameColumn">' + player_name + '</td><td class="Site">' + site + '</td><td class="Score">' + score + '</td></tr></table>'; 
 

 
    // TopScore 
 
    if(i == 0){ 
 
    parent_dom = dom_top_score.clone(); 
 
    } 
 
    // ScoreBlueBackground 
 
    else{ 
 
    parent_dom = dom_score_blue_background.clone(); 
 
    } 
 
    
 
    parent_dom.append(dom_table); 
 
    $('#GameRanking').append(parent_dom); 
 
}

td { 
 
    width: 90px; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
#GameRanking { 
 
    
 
} 
 

 
.FirstRow, .TopScore, .ScoreBlueBackground { 
 
    margin: 0 0 0 5px; 
 
} 
 

 
.TopScore { 
 
    color: #fff; 
 
    background: #b01f1f; 
 
} 
 

 
.ScoreBlueBackground { 
 
    color: #fff; 
 
    background: #054f90; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="GameRanking" style="position: relative; top: 5px; height: 720px"> 
 
    <div class="FirstRow"> 
 
     <table class="table"> 
 
      <tr> 
 
       <td class="RankColumn">Rank</td> 
 
       <td class="PlayernameColumn">Player Name</td> 
 
       <td class="Site">Site</td> 
 
       <td class="Score">Score</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

來源

2017-07-04 14:02:28 monkianer

非常感謝！這工作:) – Sugan88

-1

JSON2HTML不起作用所有你想你只是遍歷你的JSON的方式，通過使用JavaScript for循環和其他必要的表格製作創建一個表和追加函數

來源

2017-07-04 13:43:17

問題是有點老，但JSON2HTML確實做的正是這個..因爲它是一個客戶端模板引擎

這裏的關於如何使這項工作的變換

var transform = {"<>":"div","class":"ScoreBlueBackground","style":"position: relative; top: 5px; left: 100px","html":[ 
 
    {"<>":"table","class":"table","html":[ 
 
     {"<>":"tbody","html":[ 
 
      {"<>":"tr","html":[ 
 
       {"<>":"td","class":"rankColumn","html":function(obj,index){ 
 
\t \t \t return(index+1); \t 
 
\t \t }}, 
 
       {"<>":"td","class":"playername","html":"${PlayerName}"}, 
 
       {"<>":"td","class":"siteName","html":"${Site}"}, 
 
       {"<>":"td","class":"score","html":"${Score}"} 
 
       ]} 
 
      ]} 
 
     ]} 
 
    ]}; 
 

 
    
 
var jsonData = [{"PlayerName": "xxx", "Site": "yyy", "Score":"zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}, 
 
{"PlayerName": "aaa", "site": "yyy", "Score": "zzz"}]; 
 

 
$("#GameRanking").json2html(jsonData,transform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script> 
 
    
 

 
<div id="GameRanking" style="position: relative; top: 5px; height: 720px"> 
 
    <div class="FirstRow"> 
 
     <table class="table"> 
 
      <tr> 
 
       <td class="RankColumn">Rank</td> 
 
       <td class="PlayernameColumn">Player Name</td> 
 
       <td class="Site">Site</td> 
 
       <td class="Score">Score</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

來源

2017-10-30 18:10:11

將Json數據分配給HTML單元格

回答

相關問題