CreativPur
Erfahrenes Mitglied
Hi,
ich habe eine Tabelle, wo Lottozahlen von 1-49 eingepflegt sind.
Für jede Zahl ein Tabellenfeld.
Jetzt möchte ich nicht nur wie folgend das angeklickte Feld farblich ändern, sondern jedem Feld auch eine unsichtbare Checkbox integrieren.
Wie kann ich das lösen ? Per CSS ?
ich habe eine Tabelle, wo Lottozahlen von 1-49 eingepflegt sind.
Für jede Zahl ein Tabellenfeld.
Jetzt möchte ich nicht nur wie folgend das angeklickte Feld farblich ändern, sondern jedem Feld auch eine unsichtbare Checkbox integrieren.
Wie kann ich das lösen ? Per CSS ?
Javascript:
function toggle(checkbox) {
var par = checkbox;
while (par && par.nodeName !== "TD") {
par = par.parentNode;
}
if (par){
par.style.backgroundColor = checkbox.checked? "blue": "#fff";
par.style.font = checkbox.checked? "blue": "#fff";
}
}
HTML:
<table border="1" style="font-size:14px;">
<tbody>
<tr align="center">
<td><input type="checkbox" id="checkzeile1" onclick="toggle(this)"/>1</td>
<td><input type="checkbox" id="checkzeile2" onclick="toggle(this)"/>2</td>
<td><input type="checkbox" id="checkzeile3" onclick="toggle(this)"/>3</td>
<td><input type="checkbox" id="checkzeile4" onclick="toggle(this)"/>4</td>
<td><input type="checkbox" id="checkzeile5" onclick="toggle(this)"/>5</td>
<td><input type="checkbox" id="checkzeile6" onclick="toggle(this)"/>6</td>
<td><input type="checkbox" id="checkzeile7" onclick="toggle(this)"/>7</td>
<td><input type="checkbox" id="checkzeile8" onclick="toggle(this)"/>8</td>
<td><input type="checkbox" id="checkzeile9" onclick="toggle(this)"/>9</td>
<td><input type="checkbox" id="checkzeile0" onclick="toggle(this)"/>0</td>
<tr>
</tbody>
</table>