Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

joao.felipe

Colorir Multiplas celulas de tabela atraves de checkbox

Por , em Javascript

Recommended Posts

joao.felipe    0

joao.felipe
Postado

Pessoal, boa noite,

 

estou tentando fazer um checkbox colorir multiplas celulas de uma tabela. Ao selecionar o checkbox e clicar no onclick botao(filtrar) ou somente selecionando o checkbox, eu preciso colorir a celula de verde através de alguma propriedade. Ex: <td ID="A1" color"green" ></td> da  

 

<!DOCTYPE html>
<html>
<body>

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

carloshss    0

carloshss
Postado

Olá, João. Fiz um script em JS para esse caso:

  

mapCheckbox = [
  {
    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[i].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[i].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[i].removeAttribute('bgcolor');
    }


  }
}));

 

DEMO:

https://jsfiddle.net/q9h4Lrjf/

 

Obs¹: a ação de colorir ficou apenas pelo clique no checkbox que tiver o atributo "name" como "checkbox1". Então, o botão "Verificar Marcados" pode ser removido.

 

Obs²: id no HTML não deve conter espaços

https://www.w3schools.com/tags/att_global_id.asp - Na seção "Attribute Values"

Compartilhar este post

Link para o post
Compartilhar em outros sites

joao.felipe    0

joao.felipe
Postado
23 horas atrás, carloshss disse:

Olá, João. Fiz um script em JS para esse caso:

  


mapCheckbox = [
  {
    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[i].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[i].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[i].removeAttribute('bgcolor');
    }


  }
}));

 

DEMO:

https://jsfiddle.net/q9h4Lrjf/

 

Obs¹: a ação de colorir ficou apenas pelo clique no checkbox que tiver o atributo "name" como "checkbox1". Então, o botão "Verificar Marcados" pode ser removido.

 

Obs²: id no HTML não deve conter espaços

https://www.w3schools.com/tags/att_global_id.asp - Na seção "Attribute Values"

 

AMIGO, BOM DIA!

 

ESTOU TENDO O SEGUINTE PROBLEMA. COMO ESTOU APRENDENDO USO O BLOCO DE NOTAS. AO TENTAR SALVAR RECEBO A MENSAGEM: este arquivo contem caracteres no formato unicode que serao perdidos se voce salvar como arquivo texto codificado como ANSi. realizei o procedimento mas nao estou conseguindo executar o mapcheckbox.

 

vou postar o código completo do HTML. criei um botao no evento onclick nao consigo pintar a célula. Alguém poderia enviar código por completo já funcionando dentro do HTML pois facilita minha compreensao

 

Obrigado a todos, está sendo muito interessante estudar esses códigos, o difícil é entender os erros porque nao consigo depurar corretamente os códigos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

joao.felipe    0

joao.felipe
Postado
Em 15/07/2019 at 11:38, joao.felipe disse:

 

AMIGO, BOM DIA!

 

ESTOU TENDO O SEGUINTE PROBLEMA. COMO ESTOU APRENDENDO USO O BLOCO DE NOTAS. AO TENTAR SALVAR RECEBO A MENSAGEM: este arquivo contem caracteres no formato unicode que serao perdidos se voce salvar como arquivo texto codificado como ANSi. realizei o procedimento mas nao estou conseguindo executar o mapcheckbox.

 

vou postar o código completo do HTML. criei um botao no evento onclick nao consigo pintar a célula. Alguém poderia enviar código por completo já funcionando dentro do HTML pois facilita minha compreensao

 

Obrigado a todos, está sendo muito interessante estudar esses códigos, o difícil é entender os erros porque nao consigo depurar corretamente os códigos.

 

Alguém disponível ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrielms    0

gabrielms
Postado

@joao.felipe O problema do bloco de notas é bem simples de resolver.

 

Para alterar a codificação do arquivo, basta fazer a mudança quando for salvar.

image.thumb.png.d069a358b28d5e32d6a9bbfc905e38b8.png

Na web pro padrão dos desenvolvedores só utilizamos o Formato UTF-8, sempre que você for trabalhar na web, sempre trabalhe com o UTF-8.

 

infelizmente eu não vou explicar o que é o UTF-8, mas é fácil você achar artigos sobre o assunto, e o porque usar o UTF-8.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Carlos Web
      Listagem por ID em ordem crescente !!
      Por Carlos Web
      Olá...
      Estou tentando fazer o seguinte !!
      Listando dados em tabela !!
      Gostaria que....se na listagem houver 4 linhas...indepedente de seu número de ID, faça a listagem em ID ser em ordem 1 2 3 4 !!
      Exemplo...se tiver uma listagem de dados que está em ID 1 3 3...faça ficar 1 2 3 !!

       
      echo "<table class='tabela_dados' border='1'> <tr> <td>ID</td> <td>Nome Empresa</td> <td>Responsável</td> <td>Telefone 1</td> <td>Telefone 2</td> <td>E-mail 1</td> <td>E-mail 2</td> <td>Endereço</td> <td>CEP</td> <td>Bairro</td> <td>AÇÃO 1</td> <td>AÇÃO 2</td> </tr> "; $sql = "SELECT ID FROM usuarios_dados WHERE Usuario='$usuario'"; $result = $conn->query($sql); $num_rows = $result->num_rows; $Novo_ID = 1; for ($i = 0; $i < $num_rows; $i++) { $registro = $result -> fetch_row(); $sql2 = "UPDATE usuarios_dados SET ID='$Novo_ID' WHERE ID='$Novo_ID'"; $result2 = $conn->query($sql2); $Novo_ID++; } $sql = "SELECT * FROM usuarios_dados"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<tr> <td>$row[ID]</td> <td>$row[Nome_Empresa]</td> <td>$row[Responsavel]</td> <td>$row[Telefone_1]</td> <td>$row[Telefone_2]</td> <td>$row[Email_1]</td> <td>$row[Email_2]</td> <td>$row[Endereço]</td> <td>$row[CEP]</td> <td>$row[Bairro]</td> <td> <form method='post' action='Editar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='EDITAR'> </form> </td> <td> <form method='post' action='Deletar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='DELETAR'> </form> </td> </tr> "; } } else { echo "0 results"; } $conn->close();  
    • 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");  }  
    • diogorocha18
      Buscar Info da Tabela
      Por diogorocha18
      Boa noite,
       
      Estou a fazer um bot para o discord para um jogo e estou aqui com algumas dificuldades porque a experiencia não é a melhor..
       
      É o seguinte, eu preciso que me mande na variavel "color" 3 coisas diferentes, ou melhor, me escreva na cor dependendo do innerHTML tiver "small", "medium" ou "large" escreva na variavel color "verde", "castanho" ou "vermelho".
       
      Como posso fazer para essa variavel procurar uma das tres variaveis?
       
      for (var i = 1, row; row = table.rows[i]; i++) { var color = row.cells[0].innerHTML.includes("small") var player = row.cells[0].innerText; var status = row.cells[1].innerText; if (status){ msg += " " + color + " ---> " + player + " ----> " + status + " \n" } }  
      Obrigado pela ajuda.
       
      Abraço
       
       
    • 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 
×

Informação importante

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

  Aceito