Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>>
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/](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](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.>
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 ?
@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.
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.
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)