From one table to another html table

Navigation
2

I have two table in an HTML page that is as follows:

One with my selected subjects.

Another one with the list of disciplines to select. PS: I'm just studying, I'm not using a database or something.

So the tables are in this style:

The logic is as follows:

I will click on the checkbox, and clicking on the checkbox, the marked discipline will disappear from below and go to the table above.

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

Because I want a dynamic code, which is used for every checkbox, and does not create a javascript function for every checkbox.

From one single he knows the row, column and its values to add in the top.

Understand?

I've been searching, I've learned to insert the lines, OK, but to get the values and play on the top is complicating.

I thank you all for your help. I have more or less logic, which is to pick up the line from the checkbox and save the values of the time, period and teacher in the variables and add in the first row of the table above.

Can anyone give me tips? Obr.

    
asked by anonymous 07.04.2015 / 16:15

2 answers

3

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 full HTML 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>
    
07.04.2015 / 20:14
4

To find out what tr to which this checkbox belongs you must search the parent elements of that checkbox until you get a tr . In jQuery this can be done with .closest('tr') and MooTools with .getParent('tr') . To do this with native JavaScript you can make a loop that continues until you find an element with 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 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);
}

Example online: link

    
07.04.2015 / 19:50
Doubt with ng-if or ng-hide AngularJS Create element only on first mouseover