JSFiddle - React, Tailwind, and code Playground

HTML

<body onLoad="inserir()">
<form name="frm_cad_op2" >
		<table width="80%" border="0">
			<tr>
				<td width="10%"><br></td>
				<td width="10%"><br></td>
				<td width="10%"><br></td>
				<td width="10%">
					<input type="checkbox" name="chb_todos" value="" >
					
				</td>
				<td width="10%">
					<font face="arial" size="-1">Selecione se desejar todos os Alunos!</font>	
				</td>
				<td width="10%"><br></td>
				<td width="10%"><br></td>
				<td width="10%"><br></td>
			</tr>
			<tr><br></tr>
			<tr>
				<td >
					<font face="arial" size="-1">Defina qual:</font>	
				</td>				
			</tr>
			<tr>
				<td><br></td>
				<td align="right"><font face="arial" size="-1">Colegio:</font></td>
				<td><input type="text" name="tx_ql_cole" size="5" maxlength="1" value=""></td>
				<td align="right"><font face="arial" size="-1">Sala:</font></td>
				<td><input type="text" name="tx_ql_sala" size="5" maxlength="1" value=""></td>
				<td align="right"><font face="arial" size="-1">Materia:</font></td>
				<td><input type="text" name="tx_ql_mate" size="5" maxlength="1" value=""></td>
				<td><br></td>
			</tr>
			<tr>
				<td><br></td>
				<td><br></td>
				<td><br></td>
				<td colspan="2" align="center"><button type="button" name="btn_mate" onclick="f_inse_alun();"style="width:55" >Enviar</button></td>
				<td></td>
				<td><br></td>
				<td><br></td>
				<td><br></td>
			</tr>			
		</table>
	</form>
 	</body>

JavaScript

function inserir()
{
 		x = 0;
		m_camp = ['a','b','c','d','e','f','g','h']; //contem a matriz atual
		var res = m_camp.split(","); 	        	
         w_ii = 2;
         m_aluno = new Array(w_ii); // numero de colegios
 
         w_jj = 2;
		 for (w_i=0; w_i<=w_ii; w_i++) 
		 { m_aluno[w_i] = new Array(w_jj);} // Numero de salas	 
	    
	     	      
	     w_kk =  2;	      
	     for (w_i=0; w_i<w_ii; w_i++) 
		     {
		     for (w_j=0; w_j<w_jj; w_j++)
		         { m_aluno[w_i][w_j] = new Array(w_kk);	} // numero de materias
	         }
	         
	    //adiciona os campos 
		 for (w_i=0; w_i<w_ii; w_i++) 
		     {	     	           
	         for (w_j=0; w_j<w_jj; w_j++) 
		         {
		         for (w_k=0; w_k<w_kk; w_k++)
		             { 
					  m_aluno[w_i][w_j][w_k] = res[x];
					  x++;
					 }
				  }
		 	 }   
}

function f_inse_alun()
{
 	w_form = "frm_cad_op2";
	w_Qual_Cole = document.forms[w_form].tx_ql_cole.value; // qual colegio
	w_Qual_Sala = document.forms[w_form].tx_ql_sala.value; // qual sala
	w_Qual_Mate = document.forms[w_form].tx_ql_mate.value; // qual materia   
    	if((w_Qual_Cole != "") && (w_Qual_Sala != "") && (w_Qual_Mate != "")) //Os alunos de uma determinado Colegio / Sala / Materia
	{
		alert(" - Aluno(s) : " +m_aluno[w_i][w_j][w_k]); 
	}
	else
	if((w_Qual_Cole != "") && (w_Qual_Sala != "")) // Os alunos de um determinado Colegio / Sala
	{
		w_i=w_Qual_Cole;
		w_j=w_Qual_Sala;
		for (w_k=0; w_k<w_kk; w_k++)
		{
		alert(" - Aluno(s) : " +m_aluno[w_i][w_j][w_k]); 
		}
	}
	else
	if((w_Qual_Cole != "") && (w_Qual_Mate != "")) // Os alunos de um determinado Colegio / Materia
	{
		w_i=w_Qual_Cole;
		w_k=w_Qual_Mate;
		for (w_j=0; w_j<w_jj; w_j++)
		{
			alert(" - Aluno(s) : " +m_aluno[w_i][w_j][w_k]); 
		}
	}
	else	
	if((w_Qual_Sala != "") && (w_Qual_Mate != "")) // Os alunos de uma determinada Sala / Materia
	{
		w_j=w_Qual_Sala;
		w_k=w_Qual_Mate;
		for (w_i=0; w_i<w_ii; w_i++)
		{
alert(" - Aluno(s) : " +m_aluno[w_i][w_j][w_k]);...