Question

我有一个Jquery函数，它返回Json格式字符串，我想将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"}]

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>

Answer 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>

Answer 2

问题有点陈旧，但JSON2HTML确实做到了这一点......因为它是客户端模板引擎

这是对如何使这项工作的转变

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

JSON2HTML无法以您希望的方式工作，只需循环遍历json并使用JavaScript for循环和其他必要的表创建和附加函数创建表

将Json数据分配给HTML单元格

3 个答案: