2

Tenho duas tabela em uma página HTML que é o seguinte:

Uma com as minhas disciplinas selecionadas.

Outra com a lista de disciplinas pra selecionar. PS: Estou apenas estudando, não estou usando banco de dados nem algo do tipo.

Então, as tabelas estão nesse estilo:

inserir a descrição da imagem aqui

A lógica é a seguinte:

Vou clicar no checkbox, e, ao clicar no checkbox, a disciplina marcada vai sumir de baixo e vai pra tabela de cima.

Minha dúvida é como vou saber a linha e a coluna do checkbox atual selecionado.

Porque quero um código dinâmico, que sirva pra cada checkbox, e não criar uma função javascript pra cada checkbox.

A partir de uma só ele saber a linha, coluna e os seus valores pra adicionar na de cima.

Entendem?

Andei pesquisando, já aprendi a inserir as linhas, OK, mas pra pegar os valores e jogar na de cima está complicando.

Agraeço a todos pela ajuda. Eu tenho mais ou menos a lógica, que é pegar a linha da checkbox e guardar em variáveis os valores da carga horária, período e professor e adicionar na primeira linha da tabela de cima.

Alguém pode me dar dicas? Obr.

1
  • 1
    Não estou conseguindo ver a imagem que postou, mas acredito que você precise apenas fazer um appendChild na outra tabela. opcionalmente, você poderia adicionar um evento de drag'n drop. Commented 7/04/2015 às 14:30

2 Respostas 2

4

Para saberes qual o tr a que essa checkbox pertence tens de ir procurar nos elementos pai dessa checkbox até chegares a um tr. No jQuery isso pode ser feito com o .closest('tr') e no MooTools com o .getParent('tr'). Para fazer isso com JavaScript nativo podes fazer um loop que continua até encontrar um elemento com o tagName que queres. Um exemplo de tal função seria:

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

Agora precisas uma função que troque de posição a linha clicada. Um exemplo seria:

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

Exemplo online: http://jsfiddle.net/9qeL40ax/

1
  • 1
    Obrigado pela solução. Estou testando e verificando se resolvo o problema. Thanks.
    – user17245
    Commented 7/04/2015 às 19:30
3

Neste caso, a maneira mais fácil é atribuir um evento a todos os checkbox, neste evento você move toda a linha para a tabela desejada.

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

Segue o HTML completo com script e style, note que o script está no final da pagina.

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

6
  • Olá, Toby. Muito obrigado pela paciência pra fazer esta solução. É realmente isso que eu quero, pelo que executei no trecho de código. O problema é o seguinte: Quando vou juntar tudo na página,ele não dá certo. A princípio para testes, estou colocando os scripts e css na mesma página, usando <script> </script> e <style> </style> como que vc mandou. O css deu certo, mas o script não. tenho que botar em alguma função? o que faço?
    – user17245
    Commented 7/04/2015 às 19:28
  • Caso esteja usando o Opera ou Chrome, abra as ferramentas de desenvolvimento(F12) e olhe a aba Console, lá você pode ver se ocorreu algum erro em tempo de execução no JS. Commented 7/04/2015 às 19:34
  • Opa. Uso o Firefox.
    – user17245
    Commented 7/04/2015 às 19:35
  • É possível você juntar tudo em um código só? a página completa que vc fez? pq não sei se é problema no meu bloco de código ao fazer a integração ou o navegador. Testei no internet explorer e permiti o script. não rodou
    – user17245
    Commented 7/04/2015 às 19:40
  • inclui um exemplo com script e style direto no HTML, aqui funcionou normal. observe que o script está no final da pagina. Commented 7/04/2015 às 19:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .