Question

作为更大形式的一部分，我有一个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">

注意：“lab”和“inp”类设置标签和输入标签的宽度。

以下是我用来显示所需角色数据的javascript的摘录：

var strength;
var agility;

window.onload = init;

function init() {
    people = [];
    people[0] = {  // here is where I provide the data during development
        Name: "Strider", Hp: 300, Strength: 30, Agility: 20, ... ,
         Stats: [{Component: "Head", Armor: 10,  ... ]
    people[1] = { ...

    strength = document.getElementById("strengthID");
    agility = document.getElementById("agilityID");
    ...
    assignPeople(0);  // to initialize the form with the first person's data.
}

function assignPeople(indx) {

    str.value = people[indx].Strength;
    agility.value = people[indx].Agility;
    ...
}

我不知道怎么做才能很好地显示统计数据。当然，我可以费力地编码矩阵的每个配对，如：

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

但这会导致大量变数。我已经用Google搜索了答案，但可能没有使用正确的搜索字词。

非常感谢任何协助。

Answer 1

如果要避免使用“真实”表，可以使用基于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('');
}

你会找到working example here。

HTML5 - 使用Javascript写入和读取二维数组

1 个答案: