Exbir/ocultar checkbox dentro de TD

[FabianoSouza 5]

Dentro da primeira TD da cada TR da tabela, tenho um checkbox. Ele está definido como display:none.

 

Preciso que, ao passar o mouse sobre a TR, o checkbox seja exibido.

Ao sair da TR, o checkbox torna-se display:none novamente.

 

Como faço?

[Omar~ 87]

Sem o HTML do elemento TABLE fica complicado dar um exemplo coeso.

Mas acredito que irei conseguir explicar:

Em todo caso vou me basear no meu exemplo mesmo:

<style>
    td.alvo > input {
        display: none
    }
    td.alvo.mostra > input {
        display: block
    }
</style>

<table>
    <tr class="mouse">
        <td>Coloque o cursor por cima</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
    <tr class="mouse">
        <td>Coloque o cursor por cima B</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
</table>

 

Primeiro temos que buscar o elemento que vai ser o alvo.

Citar

var ativar = document.getElementsByClassName('mouse');

 

Então como deu a min entender que são mais de um fazemos um loop e adicionamos um evento para o cursor sobre e quando sai

Citar

for (var i = 0; i < ativar.length; i++) {
      ativar.addEventListener('mouseenter', mostra, false);

      ativar.addEventListener('mouseleave', mostra, false);

}

 

Criamos a função para executar a mágica. E é aqui que o "bixo pega"

Nem tanto, como é uma tabela podemos nos orientar pelas células dela.

Então no meu exemplo eu tenho um TR > TD | TD

Uma linha 2 colunas, sendo a primeira o indice zero da lista e o índice 1 que é a segunda coluna (TD) onde queremos chegar.

Citar

function mostra(ev) {
    (ev.target).cells[1].classList.toggle('mostra');
}

 

Então o que você tem que fazer aí é só adaptar para o disign de sua TABLE.

Veja o exemplo completo:

Spoiler

<style>
    td.alvo > input {
        display: none
    }
    td.alvo.mostra > input {
        display: block
    }
</style>

<table>
    <tr class="mouse">
        <td>Coloque o cursor por cima</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
    <tr class="mouse">
        <td>Coloque o cursor por cima B</td>
        <td class="alvo"><input type="checkbox"></td>
    </tr>
</table>

<script>
    var ativar = document.getElementsByClassName('mouse');
    for (var i = 0; i < ativar.length; i++) {
        ativar[i].addEventListener('mouseenter', mostra, false);
        ativar[i].addEventListener('mouseleave', mostra, false);
    }
    
    function mostra(ev) {
        (ev.target).cells[1].classList.toggle('mostra');
    }
</script>

 

 

[caramelo21 0]

Obrigado, é exatamente o que eu estava procurando.

[FabianoSouza 5]

Ok Omar~.

Vou testar sua ideia.

 

Mas minha real expectativa é fazer isso somente com CSS. Creio que exista uma maneira.

 

Valew!

[Omar~ 87]

8 horas atrás, FabianoSouza disse:

Ok Omar~.

Vou testar sua ideia.

 

Mas minha real expectativa é fazer isso somente com CSS. Creio que exista uma maneira.

 

Valew!

Uai tenta então assim (Não sei se dar certo!):

tr:hover input[type=checkbox]