1
Good morning! I have a problem related to transferring a row from table 1 to table 2. In the example I implemented a function that goes through all table 1 and marks all checkboxes sending to table 2. The problem that for a large mass of data (400 lines) It takes a long time to answer. I don’t know if I would have a better solution or if I could modify the function cited below.
//consultando todos os input to type checkbox na pagina
//caso a sua pagina possua mais inputs deste tipo, você deve tornar o filtro abaixo mais especifico.
var adicionar = document.querySelectorAll("input[type='ckbMarcarRps']");
//consultando as tabelas que irão armazenar as disciplinas disponiveis e as que o aluno está matriculado.
var servicos = document.querySelector("#tabServicos tbody");
var selecionados = document.querySelector("#tabSelecionados tbody");
//definindo o evento que irá mover a linha, é importante instanciar apenas um evento para todos os checkbox.
var adicionarOnClick = function () {
//caso o checkbox esteja marcado, mova a linha para a tabela de matriculados, caso contrario para a tabela de disciplinas disponiveis.
var escopo = this.checked ? servicos: selecionados;
//this é o checkbox que foi clickado, o parentNode dele é a celula atual, e o parentNode da celula é a linha (arvore).
escopo.appendChild(this.parentNode.parentNode);
};
//registrando o evento criado acima para todos os checkbox.
for (var indice in adicionar) {
adicionar[indice].onclick = adicionarOnClick;
}
// Marcar e Desmarcar todos os checkbox da tabela serviços
//Será acionado após o click no Checkbox Todos
//TAB SERVICOS
$('.marcarCkb').click(function ()
{
$("#loading").show();
$('#tabServicos tbody tr:visible').each(
function ()
{
if ($('.marcarCkb').prop("checked") === true)
{
$("#tabServicos tbody tr:visible #ckbMarcarRps").trigger('click');
}
}
);
$('#divCkbTodos').hide();
//Deixando tr visivel
$('#tabSelecionados tbody tr').each(function ()
{
$('#tabSelecionados tbody tr').show();
});
//Ativando tabela de Selecionados
$('.nav li.active').next('li').find('a').trigger("click");
$("#loading").hide();
//SomarValorTotalServicos();
//SomarValorTotalSelecionados();
});
table {
box-shadow: 0px 0px 10px black;
margin-bottom: 20px;
width: 100%;
}
table th, table td {
border: 1px solid black;
}
.centro {
text-align: center;
}
.direita {
text-align: right;
}
input[type='checkbox'] {
float: left;
}
<div id="divCkbTodos">
<br />
<input type='checkbox' class='marcarCkb' id='ckbTodos' name='ckbTodos' /><label for='Todos'>Selecionar Todos</label>
</div>
<table id="matriculado">
<thead>
<tr>
<th class="centro" colspan="4">Pedidos de Matricula</th>
</tr>
<tr>
<th class="centro">Disciplina</th>
<th class="centro">Carga Horaria</th>
<th class="centro">Periodo</th>
<th class="centro">Professor</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="disponiveis">
<thead>
<tr>
<th class="centro" colspan="4">Selecione as Disciplinas</th>
</tr>
<tr>
<th class="centro">Disciplina</th>
<th class="centro">Carga Horaria</th>
<th class="centro">Periodo</th>
<th class="centro">Professor</th>
</tr>
</thead>
<tbody>
<tr>
<td class="direita"><input type="checkbox" name="adicionar" />Calculo 1</td>
<td class="centro">90</td>
<td class="centro">2°</td>
<td class="centro">Marcos Alexandre</td>
</tr>
<tr>
<td class="direita"><input type="checkbox" name="adicionar" />Algebra Linear</td>
<td class="centro">45</td>
<td class="centro">3°</td>
<td class="centro">Pedro Alves</td>
</tr>
<tr>
<td class="direita"><input type="checkbox" name="adicionar" />Fisica II</td>
<td class="centro">45</td>
<td class="centro">3°</td>
<td class="centro">Paulo Coelho</td>
</tr>
<tr>
<td class="direita"><input type="checkbox" name="adicionar" />Metodologia Cientifica</td>
<td class="centro">30</td>
<td class="centro">2°</td>
<td class="centro">Raul Rabelo</td>
</tr>
</tbody>
</table>