Ir para conteúdo
joao.felipe

Sombreamento Celula

Por , em Javascript

Recommended Posts

joao.felipe    0

joao.felipe
Postado

PESSOAL, MEU CODIGO NAO FUNCIONA, AO MARCAR CHECKBOX OU CLICANDO NO BOTAO GOSTARIA QUE A CELULA FOSSE SOMBREADA. PECO A GENTILEZA DE QUEM FOR AJUDAR REENVIE O CODIGO POR COMPLETO. OBRIGADO

 

 

 

 

<!DOCTYPE html>
<html>
<body>

<script>

mapCheckbox = [

  {
    alert alert('funcao Mapeia Checkbox'); ,        // checkbox que será clicado

  },

  {
    checkboxId: '3DS Max',        // checkbox que será clicado
    cells: ['B1', 'C1'],        // as células que serão pintadas
    color: '#00ff55'            // a cor das células
  },
  {
    checkboxId: 'Adobe + Audacity',
    cells: ['A2', 'B3'],
    color: '#7ddce4'
  },
  {
    checkboxId: 'Anaconda Python 5',
    cells: ['G1', 'H1'],
    color: '#8e90c0'
  },
]
  
// Percorre todos os checkbox com o atributo "name" igual a "checkbox1"
// E adiciona um ouvinte de clique em cada um (que executa a ação abaixo quando ocorre o clique)
document.querySelectorAll('input[name=checkbox1]').forEach(checkbox => checkbox.addEventListener("click", function(){

  // Atribui à variável as opções do checkbox clicado
  const checkboxOptions =  mapCheckbox.find(items => items.checkboxId.trim() === checkbox.id.trim());
  // Pega as células que serão pintadas ao clicar neste checkbox
  const cells = checkboxOptions ? checkboxOptions.cells : null;
  // Pega todos as tags "td"
  const tdItems = document.getElementsByTagName('td');


  // Percorre todas as tags "td" (células) para verificar se alguma corresponde à célula do checkbox clicado
  for(let i = 0; i < tdItems.length; i++) {

    const tdContent = tdItems.textContent.trim(); // Pega o texto da célula atual para verificar
    const cellFound = cells && cells.findIndex(cell => cell === tdContent) > -1;    // Verifica se a célula atual está contida no mapCheckbox do checkbox clicado

    // Se o checkbox está marcado e a célula foi encontrada
    if(checkbox.checked && cellFound) {
      // Adiciona a cor predefinida
      tdItems.setAttribute('bgcolor', checkboxOptions.color);
    }
    // Se o checkbox não estiver marcado e a célula atual (no loop) está contida no mapCheckbox do checkbox clicado
    // Remove a cor
    else if(!checkbox.checked && cellFound ){
      tdItems.removeAttribute('bgcolor');
    }


  }
}));

  function obterMarcados() 
  {
    var numeros = 0;
    var listaMarcados = document.getElementsByName("checkbox1");
    
    if (listaMarcados.length > 0)
    {
      for (loop = 0; loop < listaMarcados.length; loop++) 
      {   
        let item = listaMarcados[loop];
        console.log(item.checked)
        if (item.type == "checkbox" && item.checked) 
        {
          numeros++;
          alert(item.value);
          alert(listaMarcados.length);
        }
      } 
      if (numeros == 0)
      {
        alert("Nenhum CheckBox foi Marcado");
      }
      
    }
    else
    {
      alert("Nao existe nenhum CheckBox com esse nome(name)");
    }  
  }
</script>

<form>
  <table width="" border="1" cellspacing="10" cellpadding="4">
    <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> <td>U</td> <td>V</td> <td>X</td> </tr>  
    <tr align="center"> <td><input type="button" name="btn1" value="Filtrar" onclick=".obterMarcados()"> </td> <td> <input type="button" name="btn" value="Verificar Marcados" onclick="obterMarcados()">                                         <br></td> <td COLSPAN="12" align="center">RAIZES 8</td> <td COLSPAN="4" align="center">RAIZES 7</td> <td COLSPAN="2" align="center">RAIZES 6</td> <td td COLSPAN="3" align="center">VEREDAS 2</td> <td>CARANDÁ</td> <td>PALMAS</td>  </tr>  
    <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>3</td> <td>1</td> <td>1</td> </tr>  
    <tr align="center"> <td>01</td> <td align="left"> <input type="checkbox" id = "3DS Max"            name="checkbox1" value="3DS Max"           > 3DS Max            <br></td> <td bgcolor="green" id="A1">A1 </td> <td id="B1">B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> <td>I1</td> <td>J1</td> <td>K1</td> <td>L1</td> <td>M1</td> <td>N1</td> <td>O1</td> <td>P1</td> <td>Q1</td> <td>R1</td> <td>S1</td> <td>T1</td> <td>U1</td> <td>V1</td> <td>X1</td> </tr>  
    <tr align="center"> <td>02</td> <td align="left"> <input type="checkbox" id = "Adobe + Audacity"   name="checkbox1" value="Adobe + Audacity"  > Adobe + Audacity   <br></td> <td bgcolor="white" id="A2">A2 </td> <td>B2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
    <tr align="center"> <td>03</td> <td align="left"> <input type="checkbox" id = "Anaconda Python 5"  name="checkbox1" value="Anaconda Python 5" > Anaconda Python 5  <br></td> <td bgcolor="white" id="A3">A3 </td> <td>B3</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  

 

  </table>
</form>

  </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrielms    0

gabrielms
Postado

@joao.felipe Bom tarde!

 

Cara quando você for publica no fórum tenta usar a tag code, o código fica bem mais organizado.

 

Em relação ao código, eu notei que tem um erro no array mapCherbox, no primeiro object dentro do array o indece com o nome de alert está sem o dois pontos, e também tem um outro erro no atributo onclick dentro do elemento input com o nome de "btn1", você acabo deixando passar um ponto junto do nome da função que você ia chamar quando ocorresse aquele evento.

 

Eu adicionei um evento de verificação de load da págia no seu código também adicionei o charset UTF-8 no cabeçalho da página, assim você não vai ter problema com carácter especial.

 

Obs.. pra que um array com um object que só tem um método alert? 

  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Joao</title>
    </head>
    <body>
        <form onsubmit="return false">
            <table width="" border="1" cellspacing="10" cellpadding="4">
                <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> <td>U</td> <td>V</td> <td>X</td> </tr>  
                <tr align="center"> <td><input type="button" name="btn1" value="Filtrar" onclick="obterMarcados()"> </td> <td> <input type="button" name="btn" value="Verificar Marcados" onclick="obterMarcados()">                                         <br></td> <td COLSPAN="12" align="center">RAIZES 8</td> <td COLSPAN="4" align="center">RAIZES 7</td> <td COLSPAN="2" align="center">RAIZES 6</td> <td td COLSPAN="3" align="center">VEREDAS 2</td> <td>CARANDÁ</td> <td>PALMAS</td>  </tr>  
                <tr align="center"> <td>--</td> <td> --                                                                                                                            <br></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>1</td> <td>2</td> <td>1</td> <td>2</td> <td>3</td> <td>1</td> <td>1</td> </tr>  
                <tr align="center"> <td>01</td> <td align="left"> <input type="checkbox" id = "3DS Max"            name="checkbox1" value="3DS Max"           > 3DS Max            <br></td> <td bgcolor="green" id="A1">A1 </td> <td id="B1">B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> <td>I1</td> <td>J1</td> <td>K1</td> <td>L1</td> <td>M1</td> <td>N1</td> <td>O1</td> <td>P1</td> <td>Q1</td> <td>R1</td> <td>S1</td> <td>T1</td> <td>U1</td> <td>V1</td> <td>X1</td> </tr>  
                <tr align="center"> <td>02</td> <td align="left"> <input type="checkbox" id = "Adobe + Audacity"   name="checkbox1" value="Adobe + Audacity"  > Adobe + Audacity   <br></td> <td bgcolor="white" id="A2">A2 </td> <td>B2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
                <tr align="center"> <td>03</td> <td align="left"> <input type="checkbox" id = "Anaconda Python 5"  name="checkbox1" value="Anaconda Python 5" > Anaconda Python 5  <br></td> <td bgcolor="white" id="A3">A3 </td> <td>B3</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr>  
            </table>
        </form>
            <script>

                window.onload = function()
                {
                    mapCheckbox = [
                        {
                            alert : alert('funcao Mapeia Checkbox')      // checkbox que será clicado
                        },
                        {
                            checkboxId: '3DS Max',        // checkbox que será clicado
                            cells: ['B1', 'C1'],        // as células que serão pintadas
                            color: '#00ff55'            // a cor das células
                        },
                        {
                            checkboxId: 'Adobe + Audacity',
                            cells: ['A2', 'B3'],
                            color: '#7ddce4'
                        },
                        {
                            checkboxId: 'Anaconda Python 5',
                            cells: ['G1', 'H1'],
                            color: '#8e90c0'
                        },
                    ]
                    
                    // Percorre todos os checkbox com o atributo "name" igual a "checkbox1"
                    // E adiciona um ouvinte de clique em cada um (que executa a ação abaixo quando ocorre o clique)
                    document.querySelectorAll('input[name=checkbox1]').forEach(checkbox => checkbox.addEventListener("click", function()
                    {

                        // Atribui à variável as opções do checkbox clicado
                        const checkboxOptions =  mapCheckbox.find(items => items.checkboxId.trim() === checkbox.id.trim());
                        // Pega as células que serão pintadas ao clicar neste checkbox
                        const cells = checkboxOptions ? checkboxOptions.cells : null;
                        // Pega todos as tags "td"
                        const tdItems = document.getElementsByTagName('td');

                        // Percorre todas as tags "td" (células) para verificar se alguma corresponde à célula do checkbox clicado
                        for (let i = 0; i < tdItems.length; i++) 
                        {
                            const tdContent = tdItems.textContent.trim(); // Pega o texto da célula atual para verificar
                            const cellFound = cells && cells.findIndex(cell => cell === tdContent) > -1;    // Verifica se a célula atual está contida no mapCheckbox do checkbox clicado

                            // Se o checkbox está marcado e a célula foi encontrada
                            if (checkbox.checked && cellFound)
                            {
                            // Adiciona a cor predefinida
                            tdItems.setAttribute('bgcolor', checkboxOptions.color);
                            }
                            // Se o checkbox não estiver marcado e a célula atual (no loop) está contida no mapCheckbox do checkbox clicado
                            // Remove a cor
                            else if(!checkbox.checked && cellFound )
                            {
                            tdItems.removeAttribute('bgcolor');
                            }

                        }
                    }));
                }

                function obterMarcados() 
                {
                    var numeros = 0;
                    var listaMarcados = document.getElementsByName("checkbox1");
                    
                    if (listaMarcados.length > 0)
                    {
                    for (loop = 0; loop < listaMarcados.length; loop++) 
                    {   
                        let item = listaMarcados[loop];
                        console.log(item.checked)
                        if (item.type == "checkbox" && item.checked) 
                        {
                        numeros++;
                        alert(item.value);
                        alert(listaMarcados.length);
                        }
                    } 
                    if (numeros == 0)
                    {
                        alert("Nenhum CheckBox foi Marcado");
                    }
                    
                    }
                    else
                    {
                        alert("Nao existe nenhum CheckBox com esse nome(name)");
                    }  
                }
            </script>
    </body>
</html>

 

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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • helkton
      Somar checkbox checked
      Por helkton
      iai galera, tenho uma pendenga e não consigo achar nada pra suprir minha dúvida rsss
      seguinte....
       
      Tenho um cardápio Online onde tenho os devidos ITENS sendo abertos em uma janela modal e nesta janela tenho os devidos ITENS EXTRAS em um checkbox que o usuario clicam e adicionam
      esta é minha lista de ADICIONAIS EXTRAS QUE PEGO DO BANCO DE DADOS 
       
      <label style="border:0px red solid;font-size:1em;width:90%;text-align:left;padding:0px;margin-left:2em;" onclick="somar()"> <input style="height:23px;width:23px;cursor:pointer" type="checkbox" class='limited<?php echo $resultExtrasDelivery->idExtraDelivery?>' id="valorItemExtra" name="idExtraSelects[]" value="<?php echo $resultItensExtras->valorItemExtra?>" > <span style="cursor:pointer"><?php echo $resultItensExtras->nomeItemExtra?> <span style="font-size:0.7em;color:#DD2C00"> <small> <?php if($resultItensExtras->valorItemExtra == '0.00'){echo'';}else{echo '+R$ '.$resultItensExtras->valorItemExtra.'<input type="text" value="'.$resultItensExtras->valorItemExtra.'">';}?></small> </span> </span> </label> ela vem tipo assim
      AcréscimoTradicional - Escolha até 3 opções
      BACON 1,00
      CALABRESA 1,00
      MUSSARELA 1,00
      PRESUNTO 1,00
      OVO 1,00
       
      o que quero fazer é somente somar os itens clicados pelo usuario e somar com o TOTAL DO ITEM 
      tipo pegar o total do item tipo R$30,00 e ir somando com os acrescimos escolhidos
       
      <script> function somar() { // var valorItem = document.getElementById('valorItemExtra').value; var checkbox = document.getElementById('#valorItemExtra'); var total = 0; if(checkbox.checked == true){ total += checkbox.value; } document.getElementById('somar').innerHTML = total; } </script>  
    • Sapinn
      Não consigo verificar se o checkbox foi marcado
      Por Sapinn
      Salve! Não consigo verificar se o checkbox foi marcado, isso não faz o menor sentido porquê aparentemente eu fiz tudo certo.
       
      HTML:
       <div class="mt-4 mb-3 row ">                 <label class="label_checkbox">Adicionar customização                   <input type="checkbox" id="checkbox" name="custom_shirt">                   <span class="checkmark"></span>                 </label>               </div>  
      JAVASCRIPT:
       let checkedCustomize = document.getElementById("checkbox");  if(checkedCustomize.checked){     alert("Checkbox marcado");  }else{      console.log("checkbox não marcado");  }  
    • Caio Vargas
      [Resolvido] Múltiplos checkbox
      Por Caio Vargas
      Meus amigos estou com um problema que não consigo resolver as vezes e coisas simples mais não encaixa na minha cabeca eu tenho multiplos checkbox onde cada um tem o valor porem eu tô salvando isso em uma tabela única separado por vírgula não sei se isso e correto mais na hora de recuperar e colocar como checado não vai pq ele retorna os valores tudo jundo mesmo dando um explode não vai 
    • tony_lu
      Checkbox Obrigatório
      Por tony_lu
      Olá pessoal quero colocar um campo checkbox de aceito os termos de uso, mas não estou conseguindo validar este campo para enviar
      o form apenas se este campo por marcado podem me ajudar?
    • carlosmassam
      input type="time" apagar o value quando o checkbox for desmarcado
      Por carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
×

Informação importante

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

  Aceito