Jump to content
joao.felipe

Colorir Multiplas celulas de tabela atraves de checkbox

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alberto Nascimento
      Tenho um formulário de Upload e preciso salvar o "valor" gerado e exibido através do "echo" :
       
      echo "<img src=\"" . $destino . "\" />";  
      Como faço para salvar no campo "novonome" da tabela?
    • By manogaucho
      Tudo bem!!
      Tenho essa pagina funcionando, mas queria criar um checkbox, para selecionar os itens para deletar..
      Por que tenho que deletar iten por iten, pior que isso tenho que pesquisar novamente. já pesquisei muito, mas não consigo implantar. Agradeço desde já atenção e ajuda.
      <?php include 'conexao.php'; ?> <?php //MENSAGEM DELETADO COM SUCESSO if($_GET['deletado'] == 'ok'){ echo 'Deletado com sucesso'; }else if($_GET['deletado'] == 'nok'){ echo "Erro ao deletar"; }else{} //MENSAGEM DE ATUALIZADO COM SUCESSO if($_GET['atualizado'] == "ok"){ echo "Atualizado com sucesso!"; }else if($_GET['atualizado'] == "nok"){ echo "Erro ao atualizar."; }else{} ?> <form action="index_melhores.php" method="GET"> <input name="input_valor" type="text" placeholder="Digite aqui" size="60" /> <button type="submit">Buscar</button> </form> <?php //PEGANDO VALOR DO CAMPO BUSCA $valor = utf8_decode($_GET['input_valor']); //SELECIONAR $selecao = "SELECT * FROM produtos_vendedores_lj04 WHERE descricao_completa LIKE '%".$valor."%' OR preço LIKE '%".$valor."%' OR recadonacompra LIKE '%".$valor."%' OR fornecedor LIKE '%".$valor."%' ORDER BY descricao_completa, preço"; $linhas = mysqli_query($conexao_db, $selecao); if($linhas): foreach ($linhas as $linha): extract($linha); echo '<strong> <font color="green">Quantidade: '.utf8_encode($quantidade).'</font><br>'; echo '<strong> <font color="blue"> Produto: '.utf8_encode($descricao_completa).'</font> </strong><br>'; echo '<strong> <font color="red"> preço: '.utf8_encode($preço).'</font> </strong><br>'; echo '<strong> <font color="orange">Recado do Vendedor: '.utf8_encode($recadonacompra).'</font><br>'; echo '<strong> <font color="red">Nome do Vendedor: '.utf8_encode($nome).'</font> </strong><br>'; echo '<strong> <font color="black">Fornecedor: '.utf8_encode($fornecedor).'</font> </strong><br><br>'; echo "<a href='deletar_melhores.php?&id=".$id."'><img src='deletar.png' width='25' height='25' /></a><br><br>"; echo '<img src="linha.png" width="300" height="1" /><br><br>'; endforeach; else: echo 'Erro ao buscar: '.mysqli_erro($conexao_db); endif; ?> deletar_melhores.php
       
      <?php include 'conexao.php'; $id = $_GET['id']; //DELETAR $queryDeletarArq = "SELECT * FROM produtos_vendedores_lj04 WHERE id='".$id."'"; $deletarArq = mysqli_query($conexao_db, $queryDeletarArq); if($deletarArq): foreach ($deletarArq as $del): extract($del); $foto_db = $foto; endforeach; $queryDeletar = "DELETE FROM produtos_vendedores_lj04 WHERE id='".$id."'"; $deletar = mysqli_query($conexao_db, $queryDeletar); mysqli_close($conexao_db); header("location: index_melhores.php?deletado=ok"); else: mysqli_close($conexao_db); header("location: index_melhores.php?deletado=nok"); endif; ?>  
    • By Rui PG
      Olá Amigos!
      Por favor, vocês poderiam me ajudar em uma questão, sou muito novo em desenvolvimento e acabei pegando o barco andando aqui na empresa :) rs.
       
      NECESSIDADE
       
      - Carregar os dados que vem da procedure "Proc_Lista" nas colunas que foram criadas manualmente no Datagrid.
      - Ao clicar no checkbox, da coluna “Selecionar”, de qualquer linha do Datagrid, os dados da linha devem ser apresentados nos campos do Form (TextBox e Combobox).
      - Ao desmar o checkbox da linha selecionada no Datagrid, os dados devem ser limpos do Form.
       
      O que eu tentei fazer
       
       
      Quando executo o programa o sistema está criando os campos automaticamente dentro do datagrid e deveria carregar dentro de cada coluna que foi criada.

      Resultado que está dando errado, quando carrego os dados no datagrid.
      O código está substituindo os meus campos que terminam com o (X), nesse caso preciso que as informações carreguem dentro dos campos terminados em (X) na qual eu criei manualmente, porém respeitando as camadas do projeto na qual descrevi abaixo.
      (Print do form em execução)

       
      CAMADA DE DADOS
      - Lista os Dados para o DataGrid
              public DataTable MostrarVisita(int CODALUNO)
              {
                  comando.Connection = conexao.Conectar();
                  comando.CommandText = "Proc_Lista_FollowupDetalheVisita";
                  comando.CommandType = CommandType.StoredProcedure;
                  comando.Parameters.AddWithValue("@CODALUNO", CODALUNO);
                  leer = comando.ExecuteReader();
                  tabela.Load(leer);
                  conexao.Desconectar();
                  return tabela;
              }//fim do bloco
       
      CAMADA DE NEGOCIOS
      public DataTable MostrarFollowupGeral(string CODALUNO)
              {
                 DataTable tabela = new DataTable();
          tabela = objetoFollowupGeral.MostrarVisita(Convert.ToInt32(CODALUNO));
                 return tabela;
              }
       
      CAMADA DO USUARIO
              private void MostrarFollowupVisita()
              {
       
                  dtgVisita.Columns.Clear
                  var columnCheck = new DataGridViewCheckBoxColumn();
                  columnCheck.HeaderText = "[x]";
                  this.dtgVisita.Columns.Add(columnCheck);
       
                 
                  var varCodAlunoII = txtCodAluno.Text;
      FollowupGeralModel objectInterno = new FollowupGeralModel();               dtgVisita.DataSource = objectInterno.MostrarFollowupGeral(varCodAlunoII.ToString());
                  dtgVisita.Columns[1].Visible = false;
                  txtTotalLinhaDataGrid.Text = dtgVisita.RowCount.ToString();
              }
       
    • By douglas79
      Bom dia,
       
      Estou seguindo uma vídeo aula no Youtube e o instrutor lá colocou uma sequência de div's (seja id ou class), o seletor background não funciona.

      Vou postar o código até o momento:
       
      @charset "utf-8";
       
      body, ul{padding:0;margin:0;background: #e2e2e2;list-style: none;}
      #geral{overflow: hidden;}
      #geral #topo{width:1018px;margin:0 auto;overflow: hidden;}
      #geral #topo #logo, #menuTopo{float:left;width:400px;}
      #geral #topo #logo{background:#ccc;}
      #geral #topo #menuTopo{}
      #geral #topo #menuTopo li{float:left;padding:5px;}

      Alguém pode me tirar essa dúvida???
      Desde já, agradeço!
    • By Gildvan Arley
      <?php $consulta = $conexao->query('SELECT * FROM nomevip '); while ($exibir=$consulta->fetch(PDO::FETCH_ASSOC)){ ?> Olá
      Como posso remover 13 ids desse SELECT do 1 ao 13 
×

Important Information

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