web-dev-qa-db-fra.com

Tableau multidimensionnel JavaScript

Quelqu'un peut-il me donner un exemple/exemple de JavaScript avec un tableau d'entrées multidimensionnel? J'espère que vous pourrez m'aider car je suis encore novice en JavaScript.

Comme lorsque vous entrez 2 lignes et 2 colonnes, le résultat sera 2 lignes d’entrée et 2 colonnes d’entrée.

Comme ça:

[input][input]                
[input][input]
javascriptmultidimensional-array
132
SpitFire
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';

http://jsfiddle.net/z4Un3/

Et si vous souhaitez stocker des éléments 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';

Pas vraiment sûr de l'utilité de ce qui précède est jusqu'à ce que vous attachez les éléments. Ce qui suit peut être plus ce que vous cherchez:

<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';

http://jsfiddle.net/z4Un3/3/

Ou peut-être ceci:

<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;
}

Qui donne:

[2, 0]

Dans la console Si vous voulez écrire cela en texte, vous pouvez result.join(' ');, ce qui vous donnera 2 0.

http://jsfiddle.net/z4Un3/6/

MODIFIER

Et une démonstration de travail:

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

http://jsfiddle.net/z4Un3/8/

294
Jared Farrish

Citation extraite de Structures de données et algorithmes avec JavaScript

Les bonnes parties (O’Reilly, p. 64). Crockford étend le JavaScript objet tableau avec une fonction qui définit le nombre de lignes et de colonnes et définit chaque valeur sur une valeur transmise à la fonction. Voici son définition:

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;
}

Voici du code pour tester la définition:

var nums = Array.matrix(5,5,0);
print(nums[1][1]); // displays 0
var names = Array.matrix(3,3,"");
names[1][2] = "Joe";
print(names[1][2]); // display "Joe"

Nous pouvons également créer un tableau à deux dimensions et l'initialiser à un ensemble de valeurs sur une seule ligne:

var grades = [[89, 77, 78],[76, 82, 81],[91, 94, 89]];
print(grades[2][2]); // displays 89
25
Teoman shipahi

Déclaré sans attribution de valeur.

2 dimensions ...

var arrayName = new Array(new Array());

3 dimensions ...

var arrayName = new Array(new Array(new Array()));
15
ShawnS

Je sais que c'est ancien mais qu'en est-il ...

Exemple 4x4 (actually 4x<anything>):

var matrix = [ [],[],[],[] ]

qui peut remplir par:

for (var i=0; i<4; i++) {
   for (var j=0; j<4; j++) {
      matrix[i][j] = i*j;
   }
}
11
Nadav

très simple

var states = [,];
states[0,0] = tName; 
states[0,1] = '1';
states[1,0] = tName; 
states[2,1] = '1';

...

states[n,0] = tName; 
states[n,1] = '1';
9
user4839072
function Array2D(x, y)
{
    var array2D = new Array(x);

    for(var i = 0; i < array2D.length; i++)
    {
        array2D[i] = new Array(y);
    }

    return array2D;
}

var myNewArray = Array2D(4, 9);

myNewArray[3][5] = "booger";
6
Ken Jinks

J'espère que le code suivant convient à vos besoins

var row= 20;
var column= 10;
var f = new Array();

for (i=0;i<row;i++) {
 f[i]=new Array();
 for (j=0;j<column;j++) {
  f[i][j]=0;
 }
}
6
Nishanth Suresh
var size = 0;   
 var darray = new Array();
    function createTable(){
        darray[size] = new Array();
        darray[size][0] = $("#chqdate").val();
        darray[size][1]= $("#chqNo").val();
        darray[size][2] = $("#chqNarration").val() ;
        darray[size][3]= $("#chqAmount").val();
        darray[size][4]= $("#chqMode").val();
    }

augmenter la taille var après votre fonction.

4
Gaurav

Alors voici ma solution.

Un exemple simple pour un tableau 3x3. Vous pouvez continuer à enchaîner cela pour aller plus loin

Array(3).fill().map(a => Array(3))

Ou la fonction suivante générera n'importe quel niveau de profondeur que vous aimez

f = arr => {
    let str = 'return ', l = arr.length;
    arr.forEach((v, i) => {
        str += i < l-1 ? `Array(${v}).fill().map(a => ` : `Array(${v}` + ')'.repeat(l);
    });
    return Function(str)();
}
f([4,5,6]) // Generates a 4x5x6 Array

http://www.binaryoverdose.com/2017/02/07/Generating-Multidimensional-Arrays-in-JavaScript/

2
BinaryOverdose

vous pouvez créer un tableau suivez le code ci-dessous:

var arraymultidimensional = []
    arraymultidimensional = [[value1,value2],[value3,value4],[value5,value6]];

Résultat: 
[v1] [v2] position 0 
[v3] [v4] position 1 
[v5] [v6] position 2

Pour ajouter à array dinamically, utilisez la méthode ci-dessous:

//vectorvalue format = "[value,value,...]"
function addToArray(vectorvalue){
  arraymultidimensional[arraymultidimensional.length] = vectorvalue;
}

J'espère que cela t'aides. :)

2
b1c10

J'ai créé un module npm pour le faire avec une flexibilité supplémentaire:

// create a 3x3 array
var twodimensional = new MultiDimensional([3, 3])

// create a 3x3x4 array
var threedimensional = new MultiDimensional([3, 3, 4])

// create a 4x3x4x2 array
var fourdimensional = new MultiDimensional([4, 3, 4, 2])

// etc...

Vous pouvez également initialiser les positions avec n’importe quelle valeur:

// create a 3x4 array with all positions set to 0
var twodimensional = new MultiDimensional([3, 4], 0)

// create a 3x3x4 array with all positions set to 'Default String'
var threedimensionalAsStrings = new MultiDimensional([3, 3, 4], 'Default String')

Ou plus avancé:

// create a 3x3x4 array with all positions set to a unique self-aware objects.
var threedimensional = new MultiDimensional([3, 3, 4], function(position, multidimensional) {
    return {
        mydescription: 'I am a cell at position ' + position.join(),
        myposition: position,
        myparent: multidimensional
    }
})

Obtenir et définir des valeurs aux positions:

// get value
threedimensional.position([2, 2, 2])

// set value
threedimensional.position([2, 2, 2], 'New Value')
0
Arjun Mehta

J'ai écrit un linéaire pour cela:

[1, 3, 1, 4, 1].reduceRight((x, y) => new Array(y).fill().map(() => JSON.parse(JSON.stringify(x))), 0);

Je pense cependant que je peux passer plus de temps à créer une version JSON.parse(JSON.stringify())- free qui est utilisée pour cloning here.

Btw, regardez mon autre réponse ici .

0
Ebrahim Byagowi

Je sais que c’est une vieille question, mais voici quelque chose à essayer: Créez votre tableau multidimensionnel et placez-le dans une balise HTML .

//Your Holding tag for your inputs!
<div id='input-container' class='funky'></div>

<script>
    //With VAR: you can seperate each variable with a comma instead of:
    //creating var at the beginning and a semicolon at the end.
    //Creates a cleaner layout of your variables
    var
        arr=[['input1-1','input1-2'],['input2-1','input2-2']],
        //globall calls these letters var so you dont have to recreate variable below
        i,j
    ;

    //Instead of the general 'i<array.length' you can go even further
    //by creating array[i] in place of 'i<array.length'
    for(i=0;arr[i];i++){
    for(j=0;arr[i][j];j++){
        document.getElementById('input-container').innerHTML+=
            "<input class='inner-funky'>"+arr[i][j]+"</input>"
        ;
    }}
</script>

C'est simplement une manière plus ordonnée d'écrire votre code et plus facile à invoquer. Vous pouvez vérifier ma démo ici!

0
Gareth Compton