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>Discussão (5)
Carregando comentários...