HTML5-使用Javascript编写和读取2d数组

作为更大表单的一部分，我有一个2D数组。目前它是硬编码的（为了便于开发），但最终它将存储在本地存储器中，任何更改都将被保存。我使用输入来显示数据，并允许进行更改

背景是一个角色扮演游戏，我儿子正在设计，并希望加快计算速度。 角色拥有各种盔甲，这些盔甲也赋予他们额外的技能。下面是一个摘录，给出了需要显示的内容的子集：

 Stats: [{ Component: "Head", Armor: 10, Evasion: 0, HP: 20, MP: 10 },
         { Component: "Chest", Armor: 20, Evasion: 10, HP: 0, MP: 0 },
         { Component: "Arms", Armor: 20, Evasion: 5, HP: 0, MP: 0 },
         { Component: "Hands", Armor: 10, Evasion: 20, HP: 5, MP: 0},
         { Component: "Legs", Armor: 15, Evasion: 0, HP: 0, MP: 0},
         { Component: "Feet", Armor: 10, Evasion: 0, HP: 0, MP: 0 }]

它在表单上显示为：

         Head Chest Arms Hands Legs Feet
Armor     10    20   20    10   15   10
Evasion    0    10    5    20    0    0
HP        20     0    0     5    0    0
MP        10     0    0     0    0    0

为了显示简单的评分，如强度和敏捷性，我使用了以下HTML：

<label class="lab" for="strengthID">Strength:</label>
<input class="inp" type="number" id="strengthID" step="any">

<label class="lab" for="agilityID">Agility:</label>
<input class="inp" type="number" id="agilityID" step="any"> 

我不知道如何很好地显示统计数据数组。当然，我可以费力地对矩阵的每一对进行编码，如：

<input class="inp" type="number" id="Armor_Head_ID" step="any">
<input class="inp" type="number" id="Armor_Chest_ID" step="any">
...

...

但这导致了大量的变量。 我在谷歌上搜索过答案，但可能没有使用正确的搜索词

任何帮助都将不胜感激。

如果您想避免使用“真实”表，可以使用基于CSS的表。创建一组div，使用下面列出的类，结果看起来像一个表（我认为在本例中可以），但是可以修改布局 完全通过CSS。这样的CSS表在8以下的IE中不起作用

.table {
    display:table;
}
.tr {
    display:table-row;
}

.th,.td {
    display:table-cell;
    padding:2px 5px;
}

.th {
    font-weight:bold;
}

.tr .td:first-child {
    font-weight:bold;
    width:100px;
}

.td input {
    width:80px;
}

我为类似的东西生成HTML代码的方法比您的方法更具动态性。而不是所有的领域 在HTML中，我将通过javascript生成完整的部分

function assignPeople( indx ) {
  var _container = document.getElementById('PersonInfo'),
      _person = people[indx],
      _out = [],
      _keys = [],
      _labels = [];
    for(attrs in _person) {
        _out.push('<div class="row">');
        switch(attrs) {
            // from your example code snippet, you might have more switch cases here, depending
            // on the different field types of your person data.
            case 'Name':
                _out.push('<label class="lab" for="'+attrs + indx+'">'+attrs+':</label>');
                _out.push('<input class="inp" type="text" id="'+attrs + indx+'" value="'+_person[attrs]+'">');
                break;
            case 'Stats':
                 // the nested array...
                 _out.push('<h3>Stats</h3>');
                 for(var i=0, l = _person[attrs].length; i < l; i++) {
                    _keys.push(_person[attrs][i].Component);
                    for( a in _person[attrs][i]) {
                        if(a!='Component' && i==0) {
                            _labels.push(a);
                        }
                    }
                 }
                 _out.push('<div class="tabe">');
                 _out.push('<div class="tr"><div class="th">&nbsp;</div>');

                 for(var i=0, l = _keys.length; i < l; i++) {
                    _out.push('<div class="th">'+_keys[i]+'</div>');
                 }
                 _out.push('</div>');
                 for(var i=0, l = _labels.length; i < l; i++) {
                    _out.push('<div class="tr">');
                    _out.push('<div class="td">'+_labels[i]+'</div>');
                    for(var j=0, k = _person[attrs].length; j < k; j++) {
                        _out.push('<div class="td"><input class="inp" type="number" id="'+attrs + i+ '_' + j +'" step="any" value="'+_person[attrs][j][_labels[i]]+'"></div>');
                    }
                    _out.push('</div>');
                 }
                 _out.push('</div>');
                break;
            default:
                _out.push('<label class="lab" for="'+attrs + indx+'">'+attrs+':</label>');
                _out.push('<input class="inp" type="number" id="'+attrs + indx+'" step="any" value="'+_person[attrs]+'">');
        }
         _out.push('</div>');
    }
    _container.innerHTML = _out.join('');
} 

功能分配人员（indx）{
var _container=document.getElementById（'PersonInfo'），
_person=人[indx]，
_out=[]，
_键=[]，
_标签=[]；
for（attrs in_person）{
_向外推（“”）；
开关（ATTR）{
//根据您的示例代码片段，这里可能有更多的开关情况，具体取决于
//在人员数据的不同字段类型上。
案例“名称”：
_out.push（''+attrs+''：'）；
_向外推（“”）；
打破
案例“统计数据”：
//嵌套数组。。。
_out.push（'Stats'）；
for（var i=0，l=_person[attrs].length；i

---

你会发现一个。

为什么不制作一个表格？@Blender-我试图避免使用表格，尽管在这种情况下，表格是用于数据而不是布局。我还是想知道没有桌子怎么办。桌子怎么了？你有表格数据，所以把它放在一个表格里。谢谢你非常详尽的回答。这正是我所需要的。它也是扩展我知识的绝佳学习工具。我感谢您为提供此解决方案所付出的所有努力！

function assignPeople( indx ) {
  var _container = document.getElementById('PersonInfo'),
      _person = people[indx],
      _out = [],
      _keys = [],
      _labels = [];
    for(attrs in _person) {
        _out.push('<div class="row">');
        switch(attrs) {
            // from your example code snippet, you might have more switch cases here, depending
            // on the different field types of your person data.
            case 'Name':
                _out.push('<label class="lab" for="'+attrs + indx+'">'+attrs+':</label>');
                _out.push('<input class="inp" type="text" id="'+attrs + indx+'" value="'+_person[attrs]+'">');
                break;
            case 'Stats':
                 // the nested array...
                 _out.push('<h3>Stats</h3>');
                 for(var i=0, l = _person[attrs].length; i < l; i++) {
                    _keys.push(_person[attrs][i].Component);
                    for( a in _person[attrs][i]) {
                        if(a!='Component' && i==0) {
                            _labels.push(a);
                        }
                    }
                 }
                 _out.push('<div class="tabe">');
                 _out.push('<div class="tr"><div class="th">&nbsp;</div>');

                 for(var i=0, l = _keys.length; i < l; i++) {
                    _out.push('<div class="th">'+_keys[i]+'</div>');
                 }
                 _out.push('</div>');
                 for(var i=0, l = _labels.length; i < l; i++) {
                    _out.push('<div class="tr">');
                    _out.push('<div class="td">'+_labels[i]+'</div>');
                    for(var j=0, k = _person[attrs].length; j < k; j++) {
                        _out.push('<div class="td"><input class="inp" type="number" id="'+attrs + i+ '_' + j +'" step="any" value="'+_person[attrs][j][_labels[i]]+'"></div>');
                    }
                    _out.push('</div>');
                 }
                 _out.push('</div>');
                break;
            default:
                _out.push('<label class="lab" for="'+attrs + indx+'">'+attrs+':</label>');
                _out.push('<input class="inp" type="number" id="'+attrs + indx+'" step="any" value="'+_person[attrs]+'">');
        }
         _out.push('</div>');
    }
    _container.innerHTML = _out.join('');
}