Uma matriz, em JavaScript, pode ser simulada através de Arrays aninhados.
O que é chamado de linha ou coluna é meramente simbólico e abstrato; eu, especificamente, gosto de pensar nas linhas como sendo as posições do Array pai:
var minhaMatriz = [
linha0, // ainda indefinida!
linha1 // ainda indefinida!
];
Mas cada linha (para que obtenhamos uma matriz) é um Array em si, onde cada posição representa uma célula, cuja definição é o cruzamento de uma linha com uma coluna. Dessa maneira, podemos dizer que "as linhas possuem as colunas" (segundo a maneira que eu gosto de pensar):
var minhaMatriz = [
[ "L0 C0", "L0 C1", "L0 C2" ],
[ "L1 C0", "L1 C1", "L1 C2" ]
];
Com isso, teremos uma matriz 2x3, ou seja, 2 linhas por 3 colunas.
Como o JavaScript é uma linguagem com tipagem dinâmica, além de o conteúdo (valor) de cada célula estar inteiramente aberto à sua escolha, não precisamos nem mesmo definir o tipo; basta iterar sobre a matriz para setar ou modificar o valor de cada coluna.
Para iterar sobre a matriz, basta iterar sobre as chamadas linhas, e, dentro dessa iteração, iterar também sobre as chamadas colunas. No exemplo abaixo, o índice i
denota a linha atual, e o índice j
denota a coluna atual:
// Troca o valor de todas as células para o inteiro 0:
for(var i = 0; i < minhaMatriz.length; i++){ // Para cada linha (índice "i")
for(var j = 0; j < minhaMatriz[i].length; j++){ // Para cada coluna (índice "j")
minhaMatriz[i][j] = 0; // Troca o valor da célula da linha "i", coluna "j".
}
}
Assim, para percorrer apenas a primeira coluna de uma matriz, só precisamos de um único loop:
// Troca o valor de cada célula da primeira coluna para 0:
for(var i = 0; i < minhaMatriz.length; i++){
minhaMatriz[i][0] = 0; // Troca o valor da célula da linha "i", coluna 0.
}
Tamanho variável
Até aqui, criamos uma matriz 2D (matriz bidimensional, ou seja, possui as dimensões altura, que corresponde ao número de linhas, e largura, que corresponde ao número de colunas) conceitualmente estática, no sentido de ter sido declarada já com os dados.
Ela também poderia ter sido declarada sem nenhuma linha:
var minhaMatriz = [];
Independentemente de como ela foi declarada, porém, podemos tanto editar os dados dentro dela (como já demonstrado), podemos também aplicar operações sobre o tamanho dela.
Inserção de linhas
Como já dito anteriormente, a matriz é um Array de linhas, e as linhas são programadas como Arrays de células. Dessa maneira, para adicionarmos linhas, basta inserir um novo Array de células no Array matriz, através do método nativo push(elemento)
do array. Obs.: este método sempre adiciona o "elemento
" ao final do Array, portanto, no exemplo abaixo, a nova linha será a última:
minhaMatriz.push(
[ "Nova linha C0", "Nova linha C1", "Nova linha C2" ]
);
Remoção e/ou inserção de linhas em índices arbitrários
Da mesma forma, há uma função nativa que remove* elementos do Array: splice(indice, quantidade)
. Obs.: este método remove, a partir da posição denotada por "indice
", um número "quantidade
" de elementos. Para removermos o último elemento, por exemplo, podemos fazer:
// Remove, da última posição da matriz (minhaMatriz.length - 1), um (1) único elemento:
minhaMatriz.splice(minhaMatriz.length - 1, 1);
Na realidade, o splice()
também adiciona elementos! Ele pode ser usado de maneira a inserir linhas na nossa matriz em posições arbitrárias! Exemplo:
minhaMatriz.splice(1, 0,
[ "C0", "C1", "C2" ]
);
Exemplo interativo
Para resumir, apresento um pequeno programa que insere e remove linhas em posições arbitrárias. (Provavelmente só funcionará nos browsers mais recentes!)
// Declaramos uma matriz com pelo menos uma linha, para que nosso exemplo saiba quantas
// colunas pretendemos utilizar:
var m = [
[ "Olá", "Stack Overflow", "em Português!" ]
];
// Localizamos os elementos declarados no HTML com os quais interagiremos:
var inputIdx = document.getElementById("inputIdx");
var botaoAdd = document.getElementById("botaoAdd");
var botaoRem = document.getElementById("botaoRem");
var pTabelas = document.getElementById("pTabelas");
// Criamos uma caixa para cada coluna (elementos dinâmicos, declarados 'on the run'):
var inputs = [];
for(var i = 0; i < m[0].length; i++){
inputs.push(_new("input", document.getElementById("spanInputs")));
}
_print(); // Mostramos como está nossa tabela inicialmente.
// Ao clicar o botão de adicionar, criamos uma nova linha no índice específicado:
botaoAdd.addEventListener("click", function(){
var novaLinha = [];
for(var i in inputs) novaLinha.push(inputs[i].value);
m.splice(+inputIdx.value, 0, novaLinha);
// OBS.: o "+" aqui é uma forma rápida de converter para inteiro!
_print(); // Mostra como ficou nossa matriz.
});
// Ao clicar o botão de remover, removemos a linha do índice especificado:
botaoRem.addEventListener("click", function(){
m.splice(+inputIdx.value, 1);
// OBS.: o "+" aqui é uma forma rápida de converter para inteiro!
_print(); // Mostra como ficou nossa matriz.
});
// Imprime a matriz como uma tabela HTML dinâmica:
function _print(){
// Retira a visualização antiga:
while(pTabelas.firstChild) pTabelas.removeChild(pTabelas.firstChild);
var table = _new("table", pTabelas);
// Cria a linha de título:
var titleRow = _new("tr", table);
_new("th", titleRow);
for(var j = 0; j < m[0].length; j++){
var titleCell = _new("th", titleRow);
titleCell.innerHTML = j;
}
// Para cada linha da matriz, cria uma linha na tabela HTML:
for(var i = 0; i < m.length; i++){
var row = _new("tr", table);
// Em cada linha, insere uma coluna de título:
var titleCell = _new("th", row);
titleCell.innerHTML = i;
// Para cada coluna da matriz, insere uma coluna HTML:
for(var j = 0; j < m[i].length; j++){
var cell = _new("td", row);
cell.innerHTML = m[i][j];
}
}
}
// Função de comodidade para criar e exibir elementos de maneira dinâmica. IGNORE-A! :)
function _new(tag,pai){
var el = document.createElement(tag); // Cria elemento pedido.
pai.appendChild(el); // Insere o elemento no pai.
return el; // Retorna o elemento para manipulações posteriores.
}
table { border-collapse: collapse; }
td, th { border: 1px solid black; padding: 2px 15px; }
input { width: 75px; }
<p>
Linha a inserir: <span id="spanInputs"></span>
<br />
</p>
<p>
Índice: <input id="inputIdx" type="number" value="0" />
<button id="botaoAdd">Adicionar no índice</button>
<button id="botaoRem">Remover do índice</button>
<br />
</p>
<p id="pTabelas"></p>
Conclusão
Para fazer a matriz N x 3 (N linhas de 3 colunas) que você precisa, basta pensar que a coluna indexada por j=0 é o colégio, a coluna j=1 é a sala, e a coluna j=2 é o que você chama de mate (matéria / disciplina?).
Assim, não faz sentido aumentar o número de dimensões da matriz (por exemplo, programá-la N x M x O x P). O problema deve estar mais localizado na representação (modelagem) do conhecimento do seu negócio, do que na linguagem JavaScript em si.
Caso precise de mais ajuda em JS, um primeiro passo é sempre verificar a documentação da "classe"