0

より大きなフォームの一部として、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">
...

しかし、それは大量の変数につながります。私は答えをグーグルで検索しましたが、おそらく正しい検索用語を使用していませんでした。

どんな援助でも大歓迎です。

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 に答える