From one table to another html table

Question

I have two tables in an HTML page which is the following:

One with my selected subjects.

Another with a list of subjects to select. PS: I’m just studying, I’m not using databases or anything like that.

So the tables are in this style:

The logic is as follows:

I will click on the checkbox, and when I click on the checkbox, the subject marked will disappear from below and go to the top table.

My question is how will I know the row and column of the current checkbox selected.

Because I want a dynamic code that fits each checkbox, and not create a javascript function for each checkbox.

From a single he know the row, column and their values to add in the top.

Do you understand?

I’ve been researching, I’ve learned to insert the lines, OK, but to take the values and play on top is complicating.

I aggravate everyone for their help. I have more or less logic, which is to take the checkbox line and save in variables the values of the workload, period and teacher and add in the first row of the table above.

Can someone give me some tips? Obr.

Answer 1

So you know what the tr to which that checkbox It belongs to go search in the elements father from that checkbox until you reach a tr. In jQuery this can be done with the .closest('tr') and in Mootools with .getParent('tr'). To do this with native Javascript you can make a loop that continues until you find an element with the tagName you want. An example of such a function would be:

function getParent(el, tagName) {
  tagName = tagName.toLowerCase();
  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

Now you need a function that changes position to the clicked line. An example would be:

function fn(e) {
    var trPai = getParent(this, 'tr')
    if (this.checked) tabelaDestino.appendChild(trPai);
    else tabelaOrigem.appendChild(trPai);
}

Online example: http://jsfiddle.net/9qeL40ax/

Answer 2

In this case, the easiest way is to assign an event to all checkboxes, in this event you move the entire row to the desired table.

//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='checkbox']");

//consultando as tabelas que irão armazenar as disciplinas disponiveis e as que o aluno está matriculado.
var matriculado = document.querySelector("#matriculado tbody");
var disponiveis = document.querySelector("#disponiveis 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 ? matriculado : disponiveis;
    //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;
}

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

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

Follow the HTML complete with script and style, note that the script is at the bottom of the page.

<style type="text/css">
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;
}
</style>

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

<script type="text/javascript">
//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='checkbox']");

//consultando as tabelas que irão armazenar as disciplinas disponiveis e as que o aluno está matriculado.
var matriculado = document.querySelector("#matriculado tbody");
var disponiveis = document.querySelector("#disponiveis 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 ? matriculado : disponiveis;
    //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;
}
</script>