How to create multidimensional array
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';
And if you're wanting to store DOM elements:
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';
Not real sure how useful the above is until you attach the elements. The below may be more what you're looking for:
<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';
Or, maybe this:
<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;}
Which gives:
[2, 0]
In the console. If you want to output that to text, you can result.join(' ');
, which would give you 2 0
.
EDIT
And a working demonstration:
<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 headfunction 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(' '));}
Quote taken from Data Structures and Algorithms with JavaScript
The Good Parts (O’Reilly, p. 64). Crockford extends the JavaScript array object with a function that sets the number of rows and columns and sets each value to a value passed to the function. Here is his definition:
Array.matrix = function(numrows, numcols, initial) { var arr = []; for (var i = 0; i < numrows; ++i) { var columns = []; for (var j = 0; j < numcols; ++j) { columns[j] = initial; } arr[i] = columns; } return arr;}
Here is some code to test the definition:
var nums = Array.matrix(5,5,0);print(nums[1][1]); // displays 0var names = Array.matrix(3,3,"");names[1][2] = "Joe";print(names[1][2]); // display "Joe"
We can also create a two-dimensional array and initialize it to a set of values in one line:
var grades = [[89, 77, 78],[76, 82, 81],[91, 94, 89]];print(grades[2][2]); // displays 89
Declared without value assignment.
2 dimensions...
var arrayName = new Array(new Array());
3 dimensions...
var arrayName = new Array(new Array(new Array()));