0

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

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

 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">
...

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

任何帮助将不胜感激。

4

1 回答 1

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('');
}

您将在此处找到一个工作示例。

于 2013-03-07T09:29:56.200 回答