1

100 人以上のサッカー選手の番号、名前、体重、年齢、身長のリストを表示する必要があります。設定したのとまったく同じdivをコピー/貼り付けて手動で変更したくありません。既にコーディングした html レイアウトに各データ セットを表示する方法があるかどうか疑問に思っていましたか? 私がグーグルで見つけることができる唯一のものは、独自のテーブルを生成するJavascriptです。次に例を示します。

配列は次のとおりです。

var playerArray = [
    ["#25","Player1", "Weight1", "Height1", "Age1", "Position1"],
    ["#99","Player2", "Weight2", "Height2", "Age2", "Position2"],
    ["#77","Player3", "Weight3", "Height3", "Age3", "Position3"],
    ["#63","Player4", "Weight4", "Height4", "Age4", "Position4"],
    ["#43","Player5", "Weight5", "Height5", "Age5", "Position5"],
    ];

そして、ここにデータを表示したい私のhtmlがあります：

<div class="rosterlist">
            <div class="p_name">[[NUMBER]] <span class="light_text2">/ [[NAME]]</span></div>
            <div class="roster_line_2"><div class="p_pos">[[POSITION]]</div><div class="p_height">[[HEIGHT]]</div><div class="p_grade">[[AGE]]</div><div class="p_weight">[[WEIGHT]]</div></div>
        </div>

それが不可能な場合は、お知らせください。コピーと貼り付けを行います:(

4

5 に答える 5

2

Stano が述べているように、これはライブラリなしで簡単に実行できます。

var i, k, html = '', line = '';
var template = ''+
  '<div class="rosterlist">' + 
    '<div class="p_name">[[0]] <span class="light_text2">/ [[1]]</span></div>'+
    '<div class="roster_line_2">'+
      '<div class="p_pos">[[5]]</div>'+
      '<div class="p_height">[[3]]</div>'+
      '<div class="p_grade">[[4]]</div>'+
      '<div class="p_weight">[[2]]</div>'+
    '</div>'+
  '</div>'+
'';
var data = [
  ["#25","Player1", "Weight1", "Height1", "Age1", "Position1"],
  ["#99","Player2", "Weight2", "Height2", "Age2", "Position2"],
  ["#77","Player3", "Weight3", "Height3", "Age3", "Position3"],
  ["#63","Player4", "Weight4", "Height4", "Age4", "Position4"],
  ["#43","Player5", "Weight5", "Height5", "Age5", "Position5"],
];

for( i=0; i<data.length; i++ ) {
  line = template;
  for( k=0; k<data[i].length; k++ ) {
    line = line.replace('[['+k+']]', data[i][k]);
  }
  html += line;
}

document.getElementById('output').innerHTML = html;

そして、あなたのマークアップで：

<div id="output"></div>
于 2013-06-22T06:40:28.983 に答える
2

これは、データ バインディングとテンプレートによって最もよく解決されます。KnockoutJS のようなテンプレート ベースのフレームワークを使用することをお勧めします。これにより、エントリごとに繰り返される単一のエントリを指定できます

リンク: http://knockoutjs.com/

于 2013-06-22T05:30:50.863 に答える
1

動作中のjsFiddleデモ

JavaScript

<script>
    var playerArray = [
        ["#25","Player1", "Weight1", "Height1", "Age1", "Position1"],
        ["#99","Player2", "Weight2", "Height2", "Age2", "Position2"],
        ["#77","Player3", "Weight3", "Height3", "Age3", "Position3"],
        ["#63","Player4", "Weight4", "Height4", "Age4", "Position4"],
        ["#43","Player5", "Weight5", "Height5", "Age5", "Position5"],
    ];

    window.onload = function () {
        var template = document.getElementById('template').innerHTML;
        var list = document.getElementById('list');

        for (var i = 0, l = playerArray.length; i < l; i++) {
            var values = {
                'NUMBER': playerArray[i][0],
                'NAME': playerArray[i][1],
                'WEIGHT': playerArray[i][2],
                'HEIGHT': playerArray[i][3],
                'AGE': playerArray[i][4],
                'POSITION': playerArray[i][5],
            };

            var t = template;
            for (var p in values) {
                t = t.replace('[[' + p + ']]', values[p]);
            }

            list.innerHTML += t;
        }

    };
</script>

HTML

<div id="list"></div>

<script id="template" type="text/html">
    <div class="rosterlist">
        <div class="p_name">[[NUMBER]] <span class="light_text2">/ [[NAME]]</span></div>
        <div class="roster_line_2"><div class="p_pos">[[POSITION]]</div><div class="p_height">[[HEIGHT]]</div><div class="p_grade">[[AGE]]</div><div class="p_weight">[[WEIGHT]]</div></div>
    </div>
</script>
于 2013-06-22T06:47:41.667 に答える
1

次のように配列をトラバースできます。

var str = '';
var len = playerArray.length;
for (var i = 0; i < len; i++) {
    str += '<div class="p_name">' + playerArray[i][0] +
        '/ <span class="light_text2">' + playerArray[i][1] + '</span> \
</div> \
<div class="roster_line_2"> \
    <div class="p_pos">' + playerArray[i][5] + '</div> \
    <div class="p_height">' + playerArray[i][3] + '</div> \
    <div class="p_grade">' + playerArray[i][4] + '</div> \
    <div class="p_weight">' + playerArray[i][2] + '</div> \
</div>';
}
document.getElementById('rosterlist').innerHTML = str;

完全な JavaScript コードはこちら: http://jsfiddle.net/VuKmv/ (IE6+ にも対応)

于 2013-06-22T06:49:24.517 に答える
1

私は個人的にハンドルバーのファンです

ここにフィドルがあります

http://jsfiddle.net/BZ2nZ/

HTML:

<div id="container"></div>

<script type="text/x-handlebars-template" id="rosterlistTemplate">
<div class="rosterlist">
    {{#each this}}
    <div class="p_name">{{number}} <span class="light_text2">/ {{name}}</span>
    </div>
    <div class="roster_line_2">
        <div class="p_pos">{{position}}</div>
        <div class="p_height">{{height}}</div>
        <div class="p_grade">{{age}}</div>
        <div class="p_weight">{{weight}}</div>
    </div>
    {{/each}}
</div>
</script>

データ： 

var playerArray = [
    ["#25","Player1", "Weight1", "Height1", "Age1", "Position1"],
    ["#99","Player2", "Weight2", "Height2", "Age2", "Position2"],
    ["#77","Player3", "Weight3", "Height3", "Age3", "Position3"],
    ["#63","Player4", "Weight4", "Height4", "Age4", "Position4"],
    ["#43","Player5", "Weight5", "Height5", "Age5", "Position5"],
    ];

データを変換します。 

var data = _(playerArray).map(function(playerInfo){
    return _.object(['number','name','weight', 'height', 'age', 'position'], playerInfo);
});

テンプレートを使用する: 

var template = Handlebars.compile($('#rosterlistTemplate').html());
$('#container').html(template(data));

アンダースコアを使用して、あなたが持っているデータの形式をこのようなものに変換しています 

[
    {number: xx, name: xx, weight: xx, height: xx, age: xx, position: xx},
    {number: xx, name: xx, weight: xx, height: xx, age: xx, position: xx},
    {number: xx, name: xx, weight: xx, height: xx, age: xx, position: xx},
]

その形式でjsonを取得できる場合は、アンダースコアは必要なく、「データの変換」ステップを完全にスキップできます。

于 2013-06-22T06:19:10.980 に答える