Question

我需要显示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>

如果不可能，请告诉我，我会复制并粘贴：（

Answer 1

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

链接：http://knockoutjs.com/

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

Answer 3

我个人是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，那么您不需要下划线，并且可以完全跳过“转换数据”步骤。

Answer 4

<强> Working jsFiddle Demo

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

Answer 5

您可以像这样遍历数组：

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 +兼容）

在预编码的HTML中显示Javascript数组？

5 个答案:

的JavaScript

HTML