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

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

javascript html css arrays

在预先编码的HTML中显示Javascript数组？,javascript,html,css,arrays,Javascript,Html,Css,Arrays,我需要显示100多名足球运动员的号码、姓名、体重、年龄和身高。我不希望复制/粘贴与我设置的完全相同的div并手动更改它们。我想知道是否有一种方法可以在我已经编码的html布局中显示每组数据？我在google上唯一能找到的就是Javascript生成自己的表。以下是一个例子：以下是阵列： var playerArray = [ ["#25","Player1", "Weight1", "Height1", "Age1", "Position1"], ["#99","Player2

我需要显示100多名足球运动员的号码、姓名、体重、年龄和身高。我不希望复制/粘贴与我设置的完全相同的div并手动更改它们。我想知道是否有一种方法可以在我已经编码的html布局中显示每组数据？我在google上唯一能找到的就是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>


[[NUMBER]]/[[NAME]]
[[位置]][[身高]][[年龄]][[体重]]

如果不可能，请告诉我，我将开始复制和粘贴：（

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

链接：

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

链接：

我个人是车把的粉丝

这是一把小提琴

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 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，那么你就不需要下划线，完全可以跳过“转换数据”步骤。

我个人是把手的粉丝

这是一把小提琴

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

正如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;

var i，k，html=''，line=''；
变量模板=“”+
'' + 
'[[0]] / [[1]]'+
''+
'[[5]]'+
'[[3]]'+
'[[4]]'+
'[[2]]'+
''+
''+
'';
风险值数据=[
[“#25”、“运动员1”、“体重1”、“身高1”、“年龄1”、“位置1”]，
[“#99”、“玩家2”、“体重2”、“身高2”、“年龄2”、“位置2”]，
[“#77”、“运动员3”、“体重3”、“身高3”、“年龄3”、“位置3”]，
[“#63”、“运动员4”、“体重4”、“身高4”、“年龄4”、“位置4”]，
[“#43”、“运动员5”、“体重5”、“身高5”、“年龄5”、“位置5”]，
];
对于（i=0；i，如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;

var i，k，html=''，line=''；
变量模板=“”+
'' + 
'[[0]] / [[1]]'+
''+
'[[5]]'+
'[[3]]'+
'[[4]]'+
'[[2]]'+
''+
''+
'';
风险值数据=[
[“#25”、“运动员1”、“体重1”、“身高1”、“年龄1”、“位置1”]，
[“#99”、“玩家2”、“体重2”、“身高2”、“年龄2”、“位置2”]，
[“#77”、“运动员3”、“体重3”、“身高3”、“年龄3”、“位置3”]，
[“#63”、“运动员4”、“体重4”、“身高4”、“年龄4”、“位置4”]，
[“#43”、“运动员5”、“体重5”、“身高5”、“年龄5”、“位置5”]，
];
对于（i=0；i
JavaScript

var播放阵列=[
[“#25”、“运动员1”、“体重1”、“身高1”、“年龄1”、“位置1”]，
[“#99”、“玩家2”、“体重2”、“身高2”、“年龄2”、“位置2”]，
[“#77”、“运动员3”、“体重3”、“身高3”、“年龄3”、“位置3”]，
[“#63”、“运动员4”、“体重4”、“身高4”、“年龄4”、“位置4”]，
[“#43”、“运动员5”、“体重5”、“身高5”、“年龄5”、“位置5”]，
];
window.onload=函数（）{
var template=document.getElementById（'template'）.innerHTML；
var list=document.getElementById（'list'）；
对于（变量i=0，l=playerArray.length；i

HTML

[[NUMBER]]/[[NAME]]
[[位置]][[身高]][[年龄]][[体重]]

JavaScript

var播放阵列=[
[“#25”、“运动员1”、“体重1”、“身高1”、“年龄1”、“位置1”]，
[“#99”、“玩家2”、“体重2”、“身高2”、“年龄2”、“位置2”]，
[“#77”、“运动员3”、“体重3”、“身高3”、“年龄3”、“位置3”]，
[“#63”、“运动员4”、“体重4”、“身高4”、“年龄4”、“位置4”]，
[“#43”、“运动员5”、“体重5”、“身高5”、“年龄5”、“位置5”]，
];
window.onload=函数（）{
var template=document.getElementById（'template'）.innerHTML；
var list=document.getElementById（'list'）；
对于（变量i=0，l=playerArray.length；i

HTML

[[NUMBER]]/[[NAME]]
[[位置]][[身高]][[年龄]][[体重]]
您可以像这样遍历数组：
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;

var-str=''；
var len=播放阵列长度；
对于（变量i=0；i