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

这最好通过数据绑定和模板来解决。我建议使用基于模板的框架，例如 KnockoutJS。这将使您能够指定为每个条目重复的单个条目

链接： http: //knockoutjs.com/

于 2013-06-22T05:30:50.863 回答
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 回答
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

我个人是Handlebars的粉丝

这是一个小提琴

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