将 Json 数据分配给 HTML 单元格答案

【问题标题】：assign Json data to HTML cells将 Json 数据分配给 HTML 单元格
【发布时间】：2017-07-04 13:30:39
【问题描述】：

我有一个返回 Json 格式字符串的 Jquery 函数，我想将 Json 数据分配给 HTML 单元格。请问我该怎么做？我尝试使用 Json2HTML 库，但似乎对我不起作用。

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"}]

默认.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>

【问题讨论】：

模板库可以让您轻松搞定。我会看Handlebars.js
一定会尝试的！谢谢你:)

标签： javascript c# jquery asp.net json

【解决方案1】：

一种方法可能是使用 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>

【讨论】：

【解决方案2】：

问题有点老了，但 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){
			return(index+1);	
		}},
                {"<>":"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>

【讨论】：

【解决方案3】：

JSON2HTML 不能按照您想要的方式工作，您只需遍历 json 并使用 JavaScript for 循环和其他必要的表格创建和附加函数来创建表格

【讨论】：