Jump to content

joao.felipe

Members
  • Content count

    7
  • Joined

  • Last visited

Community Reputation

0 Comum

About joao.felipe

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. joao.felipe

    Sombreamento Celula

    PESSOAL, AO MARCAR CHECKBOX OU CLICANDO NO BOTÃO GOSTARIA QUE A CÉLULA FOSSE SOMBREADA. ex: quando eu marcar o checkbox 3ds MAX eu quero que a celula B1, C1 e D1 fique colorida como a celula A1 <!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>
  2. joao.felipe

    Sombreamento Celula

    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>
  3. joao.felipe

    Colorir Multiplas celulas de tabela atraves de checkbox

    Alguém disponível ?
  4. joao.felipe

    Colorir Multiplas celulas de tabela atraves de checkbox

    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.
  5. 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>
  6. joao.felipe

    Duvidas em JS

  7. joao.felipe

    Duvidas em JS

    AMIGOS, ESTOU TENTANDO APRENDER A LINGUAGEM, O CODIGO É SIMPLES. TENHO UM CHECKBOX e QUERO Verificar se ele se encontra Marcado. ESTOU USANDO O FOR E QUERO QUE O RESULTADO SEJA EXIBIDO EM UM ALERTA DIZENDO CHECK MARCADO OU CHECK DESMARCADO. SEGUE O CÓDIGO. NAO SEI ONDE COLOCAR O ELSE. <!DOCTYPE HTML> <html> <body> <script> <!-- ******************************************************************* --> function obterMarcados() { alert( 'Estamos dentro da função obter Marcados!' ); var listaMarcados = document.getElementsByName("checkbox1"); if (checkBox1.checked == true) { for (loop = 0; loop < listaMarcados.length; loop++) { var item = listaMarcados[loop]; if (item.type == "checkbox" && item.checked) { alert(item.value); alert(listaMarcados.length); } } } else alert("Nao existe CheckBox Marcado"); } <!-- else alert( 'Não existe CheckBoxMarcado!' ) ; --> <!-- ******************************************************************* --> alert( 'Hello, world 1!' ); </script> <p>...After the script.</p> <form> <input type="button" NAME="submit" value="Verificar Marcados" onclick="obterMarcados()"> <input type="checkbox" name="checkbox1" value="Autocad"> Autocad <br> </form> </body> </html>
×

Important Information

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