Jump to content

Omar~

Members
  • Content count

    578
  • Joined

  • Last visited

  • Days Won

    15

Posts posted by Omar~


  1. Bem, queria entender qual é o problema, porque aconteceu para que futuramente possa solucionar então...

     

    Dei uma formatada em minha máquina e instalei o ubuntu 18.04.02 64b

    Fiz a instalação do apache, sql e o phpmyadmin. E então ao tentar acessar o PMA senha inválida mesmo sendo a mesma da instalação... Então a senha do sql também era inválida, mesmo sendo a correta usada durante a instalação.

    Certo fui pelo terminal e tentei alterar os dados, e nada simplesmente mesmo alterando a senha e reiniciando os serviços a senha sempre era dada como inválida.

    Pesquisei milhares de alternativas na web e todas não deram certo, simplesmente a senha nunca era válida durante seu uso.

    Por fim fui ao diretório de instalação do sql e acessei o arquivo de configuração ao qual guarda esse tipo de informação, e surpresa minha não havia a linha de comando de armazenamento da senha.

    Pois bem como eu já conheço o comando resolvi criar já com uma senha simples "123456" e mesmo assim a senha era inválida na autentificação. 

     

    Já estava Put@%&# da vida depois de ficar o dia inteiro tentando resolver, então desinstalei tudo apache sql-serve, reiniciei a máquina e instalei o xampp pois esse desde sempre funciona.

    Mas queria saber o motivo do problema, suspeito que possa ser a própria versão o Ubuntu.

     

     


  2. Arquivos necessários:

    https://github.com/Spell-Master/sm-web/blob/master/scripts/AjaxRequest/AjaxRequest.js

     

    https://github.com/Spell-Master/sm-web/blob/master/scripts/AjaxRequest/AjaxRequest.css

     

    HTML de como fazer:

    <div id="exibe"></div>
    
    <script>
    	// Inicia a classe Javascript para execução de ajax limpo e corretamente
    	var ajax = new AjaxRequest();
    	/*
    	 * ajax.send('exibe', 'arquivo.html', false)
    	 * Requisita um arquivo e o exibe o mesmo em um local expecífico.
    	 * Animação no mesmo local onde o arquivo será aberto.
    	 * @param {STR} div
    		Elemento#ID onde o arquivo deve ser aberto.
    	 * @param {STR} file
    		Arquivo que será aberto.
    	 * @param {STR} url (opcional)
    		Quando informado adicionará a string a barra de navegação.
    	*/
    	ajax.send('exibe', 'arquivo.html', false);
    
    	window.setTimeout(function () {
           ajax.send('exibe', 'arquivo.html', false);
        }, 3000); /* 3000 = 3 segundos */
    
    </script>

     

    Coloque as infirmações que deseja atualizar dentro do arquivo que será aberto pelo ajax


  3. Seguindo o que o @Gabriel Heming disse, não dar, pelos motivos já ditos por ele mesmo.

     

    Porém dependendo do cenário, é possível enviar informações via GET para uma página ou aquivo.

    Citar

    Exemplo:

    - Tenho a página A e que ao abrir a página B em nova aba posso enviar informações da página A para a página B. Assim sendo preenchendo ou executando dados de acordo com valores recebidos.

     

    Página A abre a página B em nova aba

    endereco_da_pagina?informacao_a=forum&informacao_b=imasters

     

    Então na página B utilizamos os valores através do PHP

    <input type="text" value="<?= $_GET['informacao_a'] ?>" />
    <input type="text" value="<?= $_GET['informacao_b'] ?>" />

    Assim sendo temos um input com o valor de forum e outro com valor imasters

     

     

     

    No mais sugiro que dê uma lida nisso para abrir nova aba usando o javascript

    (Se for a questão de usar esse cenário):

    https://developer.mozilla.org/pt-PT/docs/Web/API/Window/open

     


  4. Nunca parei para ver, mas exitem muitos conteúdos no github, dê uma conferida para ver https://github.com/mdn/

     

    Sobre material, não recomendo outro para estudo aprofundado, pois aprendi a programar em JS devido a própria documentação do Mozilla.

    E independente do conteúdo que encontrar, digo a verdade que nenhum é mais simples e completo que a própria documentação do mozilla, ou seja ensinando a programar javascript de forma simples e completa.

     

    Sugiro também que dê uma lida nisso: https://www.w3schools.com/js/

    Esse é um website que tem diversos exemplos de como usar o javascript nativo de forma simples. Ideal para iniciantes, pois trás o básico do básico em JS com simples funções, muito bom para estudar o conceito básico do JS.


  5. <?php
    function mailCheck($subject) {
        if (preg_match('/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{3})$/', $subject)) {
            return (true);
        }
    }
    
    var_dump(mailCheck("fulano@fulano.com")); // True O e-mail é valido
    var_dump(mailCheck("fulano@fulano")); // False O e-mail não é valido
    var_dump(mailCheck("fulano")); // False O e-mail não é valido
    var_dump(mailCheck("fulano123@fulano.aaa")); // True O e-mail é valido
    var_dump(mailCheck("#fulano@fulano.com")); // False O e-mail não é valido
    var_dump(mailCheck("fulano#fulano.com")); // False O e-mail não é valido
    /* E por aí vai se não for um e-mail válido sempre não haverá retorno pela função */

     


  6. Na tag <head> antes de tudo coloque isso

    <base href="url_do_website">

     

    Em exemplo 

    <base href="https://forum.imasters.com.br">

     

    Para facilitar isso e não precisar ficar configurando isso eu criei uma função php que é responsável justamente o obter o endereço url base da aplicação

     

    BaseURI.php

    <?php
    
    /**
     * ****************************************************
     * @copyright : 2017, Spell Master(c)
     * @version : 1.0
     * ****************************************************
     * @info : Obtem o diretório base do sistema
     * ****************************************************
     */
    function BaseURI() {
        $serve = filter_input_array(INPUT_SERVER, FILTER_DEFAULT);
        $rootUrl = strlen($serve['DOCUMENT_ROOT']);
        $fileUrl = substr($serve['SCRIPT_FILENAME'], $rootUrl, -9);
        if ($fileUrl[0] == '/') {
            $baseDir = $fileUrl;
        } else {
            $baseDir = '/' . $fileUrl;
        }
        return ($baseDir);
    }

    No index:

    <?php
    require ('BaseURI.php');
    ?>
    <html>
        <head>
            <base href="<?= BaseURI(); ?>">
          <!-- Restante do código html abaixo -->

     


  7. Você já escreveu a consulta para mostrar os post do usuário?

    Com essa consulta aqui ficaria mais fácil explicar.

     

    Então se fosse meu caso como eu faria....

    - Na tabela de usuário temos uma coluna ID, que acredito que esse valor seja único para cada usuário.

    Pois bem ao logar esse usuário armazenaria esse valor em uma sessão.

    - Na tabela de post criaria nova coluna exemplo

    `postado_por` int(9)

    Então toda vez que um usuário postar seu conteúdo o id dele fica será gravado nessa coluna

     

    - Quando um usuário acessa o conteúdo, apenas verificaria se o ID dele é igual ao valor da coluna que mencionei. Sendo assim ele pode editar/apagar como bem entender.

     

    - No caso do admin ele teria uma sessão gravada ao logar que indica que ele é o administrador, então, quando ele acessa o conteúdo verifico se essa sessão existe.

    Se existir não entra na condição da coluna...

     

    Exemplo:

    <?php
    $id = isset($_SESSION['id_do_usuário']) ? $_SESSION['id_do_usuário'] : null;
    
    $query = "SELECT * FROM tabela";
    // verificação dos dados de consulta aqui....
    
    if ($existe_valor) {
        if (isset($_SESSION['admin'])) {
            // Pode editar/ apagar pois é o admin
        } else if ($id && $id == $postado_por) {
            // Se $id existe e se $id é o mesmo que está na coluna "postado_por"
            // é porque esse foi o usuário quem postou o conteúdo
        } else {
            // Não é o admin nem o usuário que postou
        }
    } else {
        // Não exite nada na tabela
    }

     


  8. Sim dar para fazer, deixando de se orientar pelo elemento ID e usando a class do(s) seletor(es). Já que só podemos repetir nome de ID's em uma página (mesmo executando ajax).

     

    O problema é em obter os inputs que vão ser preenchidos pós o ajax. Como informar quais são para o javascript?

    Simples, usando conceito de herança Node, mas para isso eu precisaria do html completo. Como eu não tenho essa informação e mesmo com todo html, um exemplo simples fica difícil de apresentar, além do mais percebi o uso do BS coisa que eu nem meto a mão para mexer.

    Optei por usar um "DATA-ATTRIBUTE" que lista qual o índice do NodeList que devemos atacar, já que vamos usar class ao invés de ID.

    Bastando informar esse índice na url para o arquivo.

     

    O negócio fica mais complicado pelo fato que cada seletor é criado de forma dinâmica através de um botão assim como percebi pela imagem.

    Então para que isso funcione a função que cria o input terá que ser responsável por enumerar o valor para usar-mos.

    (Você pode usar um variável global para isso e a cada adesão a variável se incrementa, e a cada retirada de elemento ela se decrementa. O importante que o primeiro elemento seja sempre 0 "zero")

    Não sei ao exato de vai dar certo, "na teoria dar" pois como disse para ser preciso só com o html renderizado para orientar o javascript usando o "nextElementSibling" para chegar ao input sem chance de erro.

     

    Também temos que modificar como a função será ativada, uma vez que não podemos buscar por um elemento e adicionar evento a ele, se depois do script carregado tem a opção de adicionar mais elementos. (A não ser que reescrevemos a variável que guarda essa informação).

    Nesse caso optei por disparar a função diretamente em cada seletor através do onchange. Assim sendo quando criar o layout do input adicione os requezitos necessários.

     

    Segue o código:

    Spoiler
    
    <link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
    <script src="AjaxRequest.js" type="text/javascript"></script>
    
    <form id="submit_com_ajax" onsubmit="return ajax.form(this.id, 'local_do_ajax', 'recebe_post.php');">
    
        <div>
            <!-- Seletor A -->
            <select name="seletor[]" data-idx="0" onchange="executaAjax(this);">
                <option value="nao_ativa_nada">Selecione uma opção</option>
                <option value="consulta1">Maçã</option>
                <option value="consulta2">Laranja</option>
                <option value="consulta3">Banana</option>
            </select>
            <input name="input_do_seletor[]" type="text" class="informacao1"/>
            <input name="input_do_seletor[]" type="text" class="informacao2"/>
        </div>
    
        <div>
            <!-- Seletor B -->
            <select name="seletor[]" data-idx="1" onchange="executaAjax(this);">
                <option value="nao_ativa_nada">Selecione uma opção</option>
                <option value="consulta1">Maçã</option>
                <option value="consulta2">Laranja</option>
                <option value="consulta3">Banana</option>
            </select>
            <input name="input_do_seletor[]" type="text" class="informacao1"/>
            <input name="input_do_seletor[]" type="text" class="informacao2"/>
        </div>
    
        <div>
            <!-- Seletor C -->
            <select name="seletor[]" data-idx="2" onchange="executaAjax(this);">
                <option value="nao_ativa_nada">Selecione uma opção</option>
                <option value="consulta1">Maçã</option>
                <option value="consulta2">Laranja</option>
                <option value="consulta3">Banana</option>
            </select>
            <input name="input_do_seletor[]" type="text" class="informacao1"/>
            <input name="input_do_seletor[]" type="text" class="informacao2"/>
        </div>
    
    
        <button>Submeter dados do formulário</button>
    </form>
    
    <div id="local_do_ajax"></div>
    
    <script>
        var ajax = new AjaxRequest();
    
        function executaAjax(seletor) {
            var indexAlvo = seletor.dataset.idx;  // Armazendo o valor "data-idx" do alvo
            var valorInput = seletor.value; // Armazeno o "value" do alvo
    
            /*
             * Somente prossegue com a função se houver o data idx e se o value seja algum valor permitido
             */
            if (indexAlvo && valorInput !== 'nao_ativa_nada') {
                ajax.pop('local_do_ajax', 'arquivo_php.php?valor_do_input=' + valorInput + '&index_do_elemento=' + indexAlvo, false);
            }
        }
    </script>

     

     

    O php um pouco modificado pois agora tem uma nova informação e não usa mais um elemento ID e sim o class para achar os inputs

    Spoiler
    
    <?php
    $input = filter_input(INPUT_GET, 'valor_do_input', FILTER_DEFAULT);
    $index = (int) $_GET['index_do_elemento']; // Valor obtido pelo "data-idx" de cada seletor
    if (preg_match('/^([a-zA-Z0-9]+)$/i', $input)) {
        switch ($input) {
            case 'consulta1':
                $quantidade = 10;
                $valor = 111;
                break;
            case 'consulta2':
                $quantidade = 20;
                $valor = 222;
                break;
            case 'consulta3':
                $quantidade = 30;
                $valor = 333;
                break;
        }
        ?>
        <script>
            /*
             * Como o conceito de arquitetura do html é o select e logo então os inputs
             * cada elemento class possui o mesmo index Node que o seletor.
             * exemplo se fosse o seletor de numero 9 o php reenderizaria assim aqui
             * 
             * getElementsByClassName('informacao1')[<?= $index ?>]
             * getElementsByClassName('informacao1')[9]
             */
            document.getElementsByClassName('informacao1')[<?= $index ?>].value = '<?= $valor ?>';
            document.getElementsByClassName('informacao2')[<?= $index ?>].value = '<?= $quantidade ?>';
        </script>
        <?php
    }

     

     

    No caso eu usei 3 selects que seria a simulação de novos seletores criados.

     

    Tomei também a ousadia de salvar o form usando também a classe AjaxRequest, esse foi o resultado dos dados enviados:

    Spoiler

    O arquivo que recebeu o post

    
    <?php
    echo ("<pre>");
    var_dump($_POST);
    echo ("</pre>");

     

    E o resultado:

    
    array(3) {
      ["form_id"]=>
      string(15) "submit_com_ajax"
      ["seletor"]=>
      array(3) {
        [0]=>
        string(9) "consulta2"
        [1]=>
        string(9) "consulta1"
        [2]=>
        string(9) "consulta3"
      }
      ["input_do_seletor"]=>
      array(6) {
        [0]=>
        string(3) "222"
        [1]=>
        string(2) "20"
        [2]=>
        string(3) "111"
        [3]=>
        string(2) "10"
        [4]=>
        string(3) "333"
        [5]=>
        string(2) "30"
      }
    }

     

     


  9. Utilizei a própria função Javascript que desenvolvi somente para execução de ajax.

    O link para obter os arquivos estão aqui: https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

     

    Então, meu exemplo aqui vai ser genérico, mas não diferencia em nada para qualquer estrutura, pois vamos nos orientar por elementos identificadores. Que é o select e os inputs que vão receber os dados.

    Primeiro o html base com os scripts:

    Spoiler
    
    <link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
    <script src="AjaxRequest.js" type="text/javascript"></script>
    
    <select id="seletor">
        <option value="consulta1">Maçã</option>
        <option value="consulta2">Laranja</option>
        <option value="consulta3">Banana</option>
    </select>
    
    <input type="text" id="informacao1"/>
    <input type="text" id="informacao2"/>
    
    <div id="local_do_ajax"></div>
    
    <script>
        var ajax = new AjaxRequest();
        document.getElementById('seletor').addEventListener('change', executaAjax, false);
    
        function executaAjax(e) {
            var valor = e.target.value;
            if (valor) {
                ajax.pop('local_do_ajax', 'arquivo_php.php?parametro=' + valor, false);
            }
        }
    </script>

     

     

    Simples não é?

    Inclusão do css e o js usado pelo ajaxrequest

    Criamos o grupo seletor "select" e suas opções que são o valor que eu devo passar para o próximo arquivo.

    Então os dois input's que serão preenchidos com o valor logo após o ajax.

    Entra o elemento #id onde o arquivo será aberto pelo ajax (É importante que ele fique abaixo dos inputs!)

    Então no script primeiramente instanciamos a classe js AjaxRequest criando seu objeto que chamei de ajax mesmo.

    Pego o elemento #ID do seletor e adiciono o evento a ele que vai disparar toda vez que ele for alterado chamando uma função que é responsável por obter o valor e executar o método do ajax.

    Spoiler

    * A classe AjaxRequest possui alguns métodos, o método pop é um método que executa ajax via GET. Possui uma animação de progresso no canto inferior esquerdo da página, desde que você tenha incluído o arquivo css.

    Caso não queira essa animação de progresso use o método open

     

    No caso: "lembre-se que o objeto será o nome que você der na instância da classe"

    ajax.open('DIV_ID_ONDE_CARREGAR', 'CAMINHO_OU_URL_DO_ARQUIVO');

     

    Agora é só irmos ao arquivo php que recebe os dados e usar o php para filtrar o valor recebido, então usar o javascript para preencher os inputs

    Spoiler
    
    <?php
    if (isset($_GET['parametro']) && !empty($_GET['parametro'])) {
        $valor = filter_input(INPUT_GET, 'parametro', FILTER_DEFAULT);
        if (preg_match('/^([a-zA-Z0-9]+)$/i', $valor)) {
            switch ($valor) {
                case 'consulta1':
                    $quantidade = 10;
                    $valor = 111;
                    break;
                case 'consulta2':
                    $quantidade = 20;
                    $valor = 222;
                    break;
                case 'consulta3':
                    $quantidade = 30;
                    $valor = 333;
                    break;
            }
            ?>
            <script>
                document.getElementById('informacao1').value = '<?= $quantidade ?>';
                document.getElementById('informacao2').value = '<?= $valor ?>';
            </script>
            <?php
    
        }
    }

     

     

    Obs.: O ideal acredito para você é que os inputs sejam ocultos (type="hidden") e que você tenha um div ou span que servirá como um input fake para que algum usuário não o altere.

    De qualquer forma terá que tratar os dados quando submeter um suposto form, porque mesmo oculto ou desabilitados os inputs podem ser manipulados pelo inspetor do navegador.


  10. O terceiro parâmetro quando false indica que a requisição é síncrona. Ou seja, falando de forma mais simples... enquanto não houver resposta levando o tempo que for o resto do código é travado. E isso não é muito legal pois atrapalha a iteratividade do usuário com a página.

     

    É sempre aconselhável para boas práticas somente usar requisições assíncronas passando o terceiro parâmetro como true.

    Mais informações em: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

     

    Faça os seguintes testes logo após o xhttp.send();

    console.log(xhttp.status);

    Se a resposta for 404 é porque o endereço url está errado ou não existe.

    Se a resposta for 500 é porque o endereço que acessou está com erros. Ou não pode se comunicar a sua requisição.

    Depois modifique o teste para:

    console.log(xhttp.readyState);

    Esse teste pode demorar a responder pois vai checar como anda a comunicação do endereço acessado.

     

    Enfim, no primeiro teste deve responder como 200 e o segundo como 4.

    Caso não pode ser que o endereço acessado pode ser protegido pelo servidor de acessos externos, ou o mesmo não recebe parâmetros via GET, até mesmo o que você pode está enviando via get esteja bloqueado de acesso pelo arquivo web_cep.php.

     

    Por fim, como você está pegando a resposta da requisição? Isso era uma informação muito importante, pois pode ser que o problema está justamente na forma que você obtêm a resposta da requisição.


  11. @mauspinola

    Não sei o motivo que fez com que o programador que desenvolvia a aplicação saísse e não interessa  também...

    A pessoa mais adequada para corrigir essa anomalia é ele próprio. Caso não seja possível o mesmo fazer, aconselho que contrate algum webmaster para está analisando o código entendendo seu comportamento só então aplicar as devidas correções.

    Pois aqui não temos como saber como é o código para lhe orientar o que fazer.

     

    19 horas atrás, mauspinola disse:

    Alguém , me ajuda a montar esse script? É uma emergência!!

    Isso vai contra os objetivos do setor que é orientar como resolver questões.

    Tente criar um tópico solicitando uma aplicação como você deseja aqui:

    https://forum.imasters.com.br/forum/87-empregos-e-parcerias/

     

    Mas, o melhor caminho seria você contratar um programador (profissional) caso você não domine o assunto, assim sendo poderá discutir pessoalmente, quaisquer assuntos relacionados a aplicação. Uma vez que isso se trata sobre questões financeiras de sua atividade comercial.


  12. Simples veja...

     

    Citar

    $message. = 

     

    Isso no php apenas pega uma variável em string e adiciona novo conteúdo a ela exemplo:

    //$var = ""; Comentei só para mostrar a criação da variável vazia.
    $var = "Isso é uma variável";
    $var .= " - Coloquei mais ou pouco de string na var";
    var_dump($var);

    Então temos de saída

    Isso é uma variável - Coloquei mais ou pouco de string na var

     

    Basta que você apenas crie a variável mesmo vazia antes de querer utilizar-la.

     

    Quase a mesma coisa vai acontecer se o código chegar até o array $erro que deve ser criado antes de ser usado.

    Então ao invés disso

    if (!$error) {

    Isso:

    if (count($erro) < 1) {

    Citar

    NOTA: A função count é uma função nativa do php conta quantos índices existem dentro de um array

     


  13. Remova a propriedade "display: flex"

    Opte por usar só o width: 100% ou width: 100vw

    Não se esqueça de fornecer suas coordenadas na horizontal. left: 0

    Obs.: a propriedade margin auto não se aplica "não funciona" em elementos de posição absoluta "position: absolute"

     

    A barra de rolagem está no body pelo fato de ".footer" ter a propriedade box-shadow que está vazando o tamanho do body que é a largura do footer + a sombra inexistente que colocou no elemento. De toda forma box-shadow não se utiliza da forma que você fez.

     

    #EDIT:

    Me esqueci, quando o footer aparecer a barra de rolagem na vertical é porque seus elementos internos ultrapassam os 50 pixels de altura, pois foi esse o tamanho que especificou a altura do footer.


  14. Se for passar dados do php para o javascript

    echo ("<script>funcao_que_usa_dados_do_php('{$dados_do_php}')</script>");

    Se for a questão de enviar do JS para o PHP você deve informar por exemplo via GET as informações o javascript para que o servidor tenha acesso a elas.

     

    Tenha em mente que o javascript é executado na própria máquina do usuário(NÃO TENDO NADA HAVER COM O SERVER) enquanto que o PHP é executado na máquina que está como servidor.

    Então para haver comunicação entre ambos ou é por via GET ou é por POST

     

    Então, no caso do primeiro exemplo. O servidor renderizará o HTML para o usuário(máquina que acessa) esse usuário então tem o html/javascript que o serve criou.


  15. 8 horas atrás, heeycaiio disse:

    queria tentar encher um banco de dados através de um loop, e ao mesmo tempo, ter uma página fazendo select de tudo o que esta sendo inserido

    O problema que nesse caso pode causar danos a máquina que está como servidor.

     

    8 horas atrás, heeycaiio disse:

    while

    Quando um loop não tem fim, criamos o famoso "loop infinito" que trava qualquer sistema

    exemplo

    $infinito = 0;

    while ($infinito != 1) {... CÓDIGO /* DANO A MÁQUINA */

    Se eu não especificar que $infinito chegue a 1 o loop será infinito

     

    Na minha opinião pelo que entendi isso seria pior que dar um tiro no pé


  16. Dentre essas e outras eu criei essa aplicação que usa Javascript nativo e CSS

    https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

    <form id="envia_msg" onsubmit="return ajax.form('envia_msg', 'resultado', 'envia_msg.php')">
         <input type="text" name="nome" placeholder="Nome..." required>
         <br />
    	 <input type="text" name="email" placeholder="E-mail..." required>
         <br>
    	 <textarea name="msg" placeholder="Sua Mensagem..." required></textarea>
    	 <br />
         <button type="submit" >Enviar</button>
    </form>
    <p id="resultado"></p>
    
    <script>
      var ajax = new AjaxRequest();
      /*
      Metodo: form(form, div, file)
      form('ID do formulário', 'ID do elemento que mostra o resultado', 'arquivo que será enviado os dados')
      */
    </script>

    Enfim, bem melhor que usar jquery.....

     


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

     

     


  18. Aí depende.... Você quer que todos elementos class no caso "teste" seja escrito alguma coisa, ou só em 1 elemento?

     

    Bem assim escreve em todos:

    var elements = document.getElementsByClassName('teste');
    for (var i = 0; i < elements.length; i++) {
         elements[i].innerHTML = 'O texto ou formatação <div style="font-weight:bold">html</div> que desejar';
         //elements[i] += 'Mais alguma coisa'; /* Isso não apaga o que tiver se sim adiciona */
    }

     

    Assim escreve em apenas um:

    document.getElementsByClassName('teste')[0].innerHTML = 'bla bla bla';

     

    Nota:

    - Se for o caso de um único elemento que vai escrever alvo opte pelo #ID ao invés do class obtendo o ele por getElementById.

    - Quando se busca por elementos class você busca um nodeList que trás um array com todos elementos selecionados por isso usa-se elemento[INDEX] sendo que o index é o índice do alvo.

    - Quando se vai escrever com javascript você pode escrever uma testrutura HTML com innerHTML ou só um text padrão usando innerText

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.