[解決済み] 多次元配列の作成方法
2022-03-12 13:51:07
質問
多次元配列の入力を持つJavaScriptのサンプル/事例をどなたか教えてください。私はまだJavaScriptに新しいので、あなたが助けることができることを願っています。
2行2列の入力をすると、出力は2行2列の入力になるとか。
こんな感じ。
[input][input]
[input][input]
解決方法は?
var numeric = [
['input1','input2'],
['input3','input4']
];
numeric[0][0] == 'input1';
numeric[0][1] == 'input2';
numeric[1][0] == 'input3';
numeric[1][1] == 'input4';
var obj = {
'row1' : {
'key1' : 'input1',
'key2' : 'input2'
},
'row2' : {
'key3' : 'input3',
'key4' : 'input4'
}
};
obj.row1.key1 == 'input1';
obj.row1.key2 == 'input2';
obj.row2.key1 == 'input3';
obj.row2.key2 == 'input4';
var mixed = {
'row1' : ['input1', 'inpu2'],
'row2' : ['input3', 'input4']
};
mixed.row1[0] == 'input1';
mixed.row1[1] == 'input2';
mixed.row2[0] == 'input3';
mixed.row2[1] == 'input4';
また、DOM要素を格納したい場合。
var inputs = [
[
document.createElement('input'),
document.createElement('input')
],
[
document.createElement('input'),
document.createElement('input')
]
];
inputs[0][0].id = 'input1';
inputs[0][1].id = 'input2';
inputs[1][0].id = 'input3';
inputs[1][1].id = 'input4';
上記がどの程度役に立つかは、要素を付けるまでよくわかりません。下記は、あなたが探しているものであるかもしれません。
<input text="text" id="input5"/>
<input text="text" id="input6"/>
<input text="text" id="input7"/>
<input text="text" id="input8"/>
var els = [
[
document.getElementById('input5'),
document.getElementById('input6')
],
[
document.getElementById('input7'),
document.getElementById('input8')
]
];
els[0][0].id = 'input5';
els[0][1].id = 'input6';
els[1][0].id = 'input7';
els[1][1].id = 'input8';
あるいは、これかもしれない。
<input text="text" value="4" id="input5"/>
<input text="text" value="4" id="input6"/>
<br/>
<input text="text" value="2" id="input7"/>
<input text="text" value="4" id="input8"/>
var els = [
[
document.getElementById('input5'),
document.getElementById('input6')
],
[
document.getElementById('input7'),
document.getElementById('input8')
]
];
var result = [];
for (var i = 0; i < els.length; i++) {
result[result.length] = els[0][i].value - els[1][i].value;
}
どちらが与えるか。
[2, 0]
コンソールで テキストに出力したい場合は
result.join(' ');
となります。
2 0
.
EDIT
そして、動作デモです。
<input text="text" value="4" id="input5"/>
<input text="text" value="4" id="input6"/>
<br/>
<input text="text" value="2" id="input7"/>
<input text="text" value="4" id="input8"/>
<br/>
<input type="button" value="Add" onclick="add()"/>
// This would just go in a script block in the head
function add() {
var els = [
[
document.getElementById('input5'),
document.getElementById('input6')
],
[
document.getElementById('input7'),
document.getElementById('input8')
]
];
var result = [];
for (var i = 0; i < els.length; i++) {
result[result.length] = parseInt(els[0][i].value) - parseInt(els[1][i].value);
}
alert(result.join(' '));
}
関連
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] GUID / UUIDの作成方法
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] (a== 1 && a ==2 && a==3) が真に評価されることはあるのでしょうか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み] JavaScriptで2次元の配列を作成するにはどうすればよいですか?
-
[解決済み] JavaScriptでオブジェクトの配列をクローンする方法は?