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