Ir para conteúdo
FabianoSouza

Exbir/ocultar checkbox dentro de TD

Recommended Posts

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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]

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por jefinhocps
      Boa tarde Galera beleza?
       
      Desculpe a ignorância mas como posso associar um valor de um checkbox com um valor de campo number?
       
      ex:
      <input type='checkbox' name='produto[]' value='Combo 1'>
      <input type='number' name='qtdCbo1' >
       
      <input type='checkbox' name='refrigerante[]' value='Combo 2'>
      <input type='number' name='qtdCbo2' >
       
      cliente escolhe o Combo1 e depois seleciona a quantidade(qtdCbo1).
       
      outro cliente escolhe o Combo10 e em seguida seleciona a quantidade (qtdCbo10)
       
      então na outra página
       
      eu preciso mostrar o seguinte:
       
      Combo1 + qtdCbo1
      Combo10 + qtdCbo10
       
      Quando uso o foreach ele me retorna o nome do 1° combo e quantidade do primeiro item,
      na segunda passagem ele me retorna o nome do 2° combo porém com a quantidade do 1°.
       
      segue o trecho do código:
       
      foreach ($_POST['produto'] as $produto) {
                      echo "<div class=container-fluid> " .
                              "<div class='table-responsive'>" .
                                  "<table class='table table-striped table-bordered'>" .
                                      "<thead>" .
                                          "<tr>" .
                                              "<th>Produto</th>" .
                                              "<th>Quantidade</th>" .
                                          "</tr>" .
                                      "</thead>" .
                                      "<tbody>" .
                                          "<tr class='success'>" .
                                              "<td>$produto</td>" .
                                              "<td>$qtd[0]"."</td>" .
                                          "</tr>" .                    
                                      "</tbody>" .
                                  "</table>" .
                              "</div>" .
                      "</div>";
       
      Alguém tem alguma idéia de como resolver?
       
       
       
       
    • Por rickardomello
      Bom dia Pessoal,
      Preciso salvar até 3 temas em 3 colunas diferentes na minha CONTACT_LITS (Oracle, responsys), ão sei qual melhor forma usar,m se um IF, PHP ou JAVASCRIPT só encontrei foruns com valores 1,2,3, mas não com string, Alguém pode me dar um help, de como faço isso? obrigado
       
      <form method="post" action="">   <input type="email" name="EMAIL_ADDRESS_" value="" placeholder="email@exemplo.com.br">   <input type="checkbox" name="INTERESSE" value="ESTRATEGIA">Estratégia <input type="checkbox" name="INTERESSE" value="FINANCAS">Finanças <input type="checkbox" name="INTERESSE" value="GESTAO GERAL">Gestão Geral <input type="checkbox" name="INTERESSE" value="GESTAO PUBLICA">Gestão Pública <input type="checkbox" name="INTERESSE" value="GOVERNANCA CORPORATIVA">Governança Corporativa <input type="checkbox" name="INTERESSE" value="INOVACAO">Inovação <input type="checkbox" name="INTERESSE" value="LIDERANCA">Liderança <input type="checkbox" name="INTERESSE" value="MARKETING E VENDAS">Marketing e Vendas <input type="checkbox" name="INTERESSE" value="SAUDE">Saúde <input type="checkbox" name="INTERESSE" value="SUSTENTABILIDADE">Sustentabilidade <input type="checkbox" name="INTERESSE" value="TRANSFORMACAO DIGITAL">Transformação Digital <input type="checkbox" name="INTERESSE" value="VAREJO">Varejo   <select name="UNIDADE"> <option>Estado</option> <option value="AC">AC</option> <option value="AL">AL</option> <option value="AM">AM</option> <option value="AP">AP</option> <option value="BA">BA</option> <option value="CE">CE</option> <option value="DF">DF</option> <option value="ES">ES</option> <option value="GO">GO</option> <option value="MA">MA</option> <option value="MT">MT</option> <option value="MS">MS</option> <option value="MG">MG</option> <option value="PA">PA</option> <option value="PB">PB</option> <option value="PR">PR</option> <option value="PE">PE</option> <option value="PI">PI</option> <option value="RJ">RJ</option> <option value="RN">RN</option> <option value="RO">RO</option> <option value="RS">RS</option> <option value="RR">RR</option> <option value="SC">SC</option> <option value="SE">SE</option> <option value="SP">SP</option> <option value="TO">TO</option> </select>   <input type="submit" value="enviar"> <input type="hidden" name="EMAIL_PERMISSION_STATUS_" value="I"> </form>  
       
    • Por ANDRELCF
      Bom Dia a todos !!
      Estou criando um formulário em HTML e coloquei alguns checkbox, o problema é que esse formulário seguirá um fluxo então conforme o checkbox é marcado no formulário inicial terá que seguir marcado até o final do fluxo.
       
      <html> <head> <title>Formularios_RH</title> <style type="text/css">.row { margin: 2px; } .form-fieldset{ border: 1px solid; } <style data-cke-temp="1">html{cursor:text;*cursor:auto} img,input,textarea{cursor:default} </style>     </head> <body> <body style="cursor: auto;"> <fieldset class ="form-fieldset"> <div> <fieldset><legend align="center"><span style="font-size:36px;"><strong>MOVIMENTAÇÃO FUNCIONAL - MF</strong></span></legend></fieldset> </div> <p>&nbsp</p> <div class="row"> <div class="col-md-2"><span style="font-size:16px;"><strong>SOLICITANTE:</strong></span><span style="font-size:20px;"></span></div>   <div class="col-md-4"><span class="h-card" data-campo-altura="10" data-campo-classe="" data-campo-estilo="" data-campo-id="2" data-campo-largura="200" style="display:block;"><select id="@@9@@" style="width:400px;border-radius: 5px;float: left;border: 1px solid #666;"><option placeholder="9 - Tipo_Contrato">9 - Tipo_Contrato</option><option value="Valor02">Valor 02</option></select></span></div> </div>   <p>&nbsp</p> <div class="row"> <div class="col-md-2"><span style="font-size:16px;"><strong>CARGO:</strong></span><span style="font-size:20px;"></span></div>   <div class="col-md-4"><span class="h-card" data-campo-altura="10" data-campo-classe="" data-campo-estilo="" data-campo-id="2" data-campo-largura="200" style="display:block;"><select id="@@9@@" style="width:400px;border-radius: 5px;float: left;border: 1px solid #666;"><option placeholder="9 - Tipo_Contrato">9 - Tipo_Contrato</option><option value="Valor02">Valor 02</option></select></span></div>   <div class="col-md-2"><span style="font-size:16px;"><strong>DEPARTAMENTO:</strong></span><span style="font-size:20px;"></span></div>   <div class="col-md-4"><span class="h-card" data-campo-altura="10" data-campo-classe="" data-campo-estilo="" data-campo-id="2" data-campo-largura="200" style="display:block;"><select id="@@9@@" style="width:400px;border-radius: 5px; border: 1px solid #666;"><option placeholder="9 - Tipo_Contrato">9 - Tipo_Contrato</option><option value="Valor02">Valor 02</option></select></span></div>   </div> </fieldset> <div class = "row"> <input type="checkbox" name="ch_Sim" value="ch_Sim" id="ch_Sim" onclick="document.getElementById('ch_Nao').checked = false">Sim   <input type="checkbox" name="ch_Nao" value="ch_Nao" id="ch_Nao" onclick="document.getElementById('ch_Sim').checked = false">Nao </div> </body>   </html>  
    • Por brunobos21
      Olá, eu criei um formulario que salva os dados em um banco de dados mysql, e criei uma pagina de relatorio para mostrar todo mundo que se cadastra nesse banco, até ai tudo certo, só que eu tenho um campo "Status" que eu queria colocar um checkbox para o administrador poder marcar esse campo e mudar no mysql o valor do Status para 1 sempre que clicar no botão atualizar, e se o administrador desmarcar antes apertar o botão Atualizar, não mudar na tabela. Já pesquisei em tudo quer canto e não achei, se puderem me ajudar enviando algum modelo de código ou algum tópico aqui do forúm que ja fale sobre isso, agradeço. Aqui está meu código:
      <?php // definições de host, database, usuário e senha $host = "host"; $banco = "banco"; $user = "user"; $pass = "pass"; $tbl_name="tabela";   $nome = $_POST['nome']; $numero = $_POST['numero']; $email = $_POST['email']; $cidade = $_POST['cidade']; $whatsapp = $_POST['whatsapp']; $data = $_POST['data']; $status = $_POST['status'];   // conecta ao banco de dados $con = mysql_pconnect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR); // seleciona a base de dados em que vamos trabalhar mysql_select_db($banco, $con); // cria a instrução SQL que vai selecionar os dados $query = sprintf("SELECT * FROM Pesquisas"); // executa a query $dados = mysql_query($query, $con) or die(mysql_error()); // transforma os dados em um array $linha = mysql_fetch_assoc($dados); // calcula quantos dados retornaram $total = mysql_num_rows($dados); ?> <!DOCTYPE html> <html lang="en"> <head>     <title>Relatorio</title>     <meta charset="latin1_swedish_ci">     <meta name="viewport" content="width=device-width, initial-scale=1"> <!--===============================================================================================-->       <link rel="icon" type="image/png" href="images/icons/favicon2.ico"/> <!--===============================================================================================-->     <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"> <!--===============================================================================================-->     <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css"> <!--===============================================================================================-->     <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css"> <!--===============================================================================================-->     <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css"> <!--===============================================================================================-->     <link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css"> <!--===============================================================================================-->     <link rel="stylesheet" type="text/css" href="css/util.css">     <link rel="stylesheet" type="text/css" href="css/main.css"> <!--===============================================================================================--> <script src="vendor/jquery/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //--> </script> </head> <body> <form action=" " method="post">     <div class="limiter">         <div class="container-table100">             <div class="wrap-table100">                 <div class="table100">                     <table>                         <thead>                             <tr class="table100-head">                                 <th class="column1">Nome</th>                                 <th class="column2">Numero</th>                                 <th class="column3">Cidade</th>                                 <th class="column4">E-mail</th>                                 <th class="column5">Whatsapp</th>                                 <th class="column6">Tipo</th>                                 <th class="column6">Data</th>                                 <th class="column6">Status</th>                             </tr>                         </thead>                           <?php                         // se o número de resultados for maior que zero, mostra os dados                         if($total > 0) {                     // inicia o loop que vai mostrar todos os dados                     do {                         ?>                         <tbody>                                 <tr>                                     <td class="column1"><?=$linha['nome']?></td>                                     <td class="column2"><?=$linha['numero']?></td>                                     <td class="column3"><?=$linha['cidade']?></td>                                     <td class="column4"><?=$linha['email']?></td>                                     <td class="column5"><?=$linha['whatsapp']?></td>                                     <td class="column6"><?=$linha['tipo']?></td>                                     <td class="column6"><?=$linha['data']?></td>                                     <td class="column6">                                     <input type=checkbox name="banco[]" value="1"><?=$linha['status']?>                                     </td>                                 </tr>                                </tbody>                         <?php                     // finaliza o loop que vai mostrar os dados                     }while($linha = mysql_fetch_assoc($dados));                         // fim do if                         }                         ?>                     </table>                     <div class="container-contact2-form-btn">                                 <div class="wrap-contact2-form-btn">                                     <div class="contact3-form-bgbtn"></div>                                     <button class="contact2-form-btn" type="submit" value="Enviar" name="enviar">                                         Atualizar                                     </button>                                 </div>                             </div>                 </div>             </div>         </div>     </div> </form>   <!--===============================================================================================-->       <script src="vendor/jquery/jquery-3.2.1.min.js"></script> <!--===============================================================================================-->     <script src="vendor/bootstrap/js/popper.js"></script>     <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!--===============================================================================================-->     <script src="vendor/select2/select2.min.js"></script> <!--===============================================================================================-->     <script src="js/main.js"></script> </body> </html> <?php // tira o resultado da busca da memória mysql_free_result($dados); ?>
    • Por AlexandrePereira
      Estou tentando habilitar um Botão Submit com um CheckBox
      http://musicaomelhorpresente.com.br/form.php

      <input type="checkbox" name="habi" value="checkAceito" onchange="HabiDsabi()">
      <input type="submit" name="Submit" value="Enviar" disabled>

      (...)
       
      <script>
      function HabiDsabi(){
      if(document.getElementById('habi').checked == true){
      document.getElementById('Submit').disabled = true  }
      if(document.getElementById('habi').checked == false){
      document.getElementById('Submit').disabled = false  }
      }
      </script>

      Obrigado a quem puder me ajudar. 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.