How to transfer a row from one table to another table?

Asked

Viewed 70 times

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>

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.