learnMedlem sedan jan. 20051 130 inlägg Jag har ett rutnät (en tabell) där jag vill att användaren skall kunna markera en ruta (en cell) genom att klicka på den. Det ska tydligt synas att rutan är markerad och den skall även kunna avmarkeras genom ett klick.
Ett sätt är ju att lägga en checkbox i alla celler, men det är inte så värst snyggt...
Nu vill jag ha lite tips från er andra wF:are på hur jag kan lösa detta! Kanske man kan designa egna checkboxar...Är det bra?? Jag vill självklart att det ska funka i alla de vanligaste webbläsarna.
Tack på förhand!
learnMedlem sedan jan. 20051 130 inlägg Någon som har ngt tips?? Kom igen, jag vet att ni kan.. ;)
Hur fungerar det med "egen-designade" checkboxar? Hur gör man, hur "säkert" och bra är det?
(Kanske jag postade i fel forum..)
zcorpanMedlem sedan dec. 20042 245 inlägg Skulle nåt i den här stilen kunna funka?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
input { position:fixed; top:-10cm; }
label { background:red; padding:1em; display:block; }
input:checked + label { background:lime; }
input:focus + label { outline:thin dotted; }
</style>
</head>
<body>
<form action="">
<table>
<tbody>
<tr>
<td><input type="checkbox" id="a"><label for="a">a</label></td>
<td><input type="checkbox" id="b"><label for="b">b</label></td>
</tr>
<tr>
<td><input type="checkbox" id="c"><label for="c">c</label></td>
<td><input type="checkbox" id="d"><label for="d">d</label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
bossseMedlem sedan juni 2003772 inlägg Slängde ihop ett exempel, kan detta va nåt tro?
Övre raden markeras en cell med ett klick.
Den undre raden kan du markera valfritt antal celler med ett klick.
Undre radens celler avmarkeras med dubbelklick.
Du kan säket modifiera detta så det passar dig.
<html>
<head>
<style type=text/css>
body {background-color:green}
table {width:450px; height:300px; border: 1px solid black; border-collapse:collapse}
td {width:149px; height:148px; border: 1px solid black}
</style>
</head>
<body>
<table>
<tr>
<td onclick="this.style.backgroundColor='white';">
</td>
<td onclick="this.style.backgroundColor='white';">
</td>
<td onclick="this.style.backgroundColor='white';">
</td>
</tr>
<tr>
<td onclick="this.style.backgroundColor='white';"
ondblclick="this.style.backgroundColor='green';">
</td>
<td onclick="this.style.backgroundColor='white';"
ondblclick="this.style.backgroundColor='green';">
</td>
<td onclick="this.style.backgroundColor='white';"
ondblclick="this.style.backgroundColor='green';">
</td>
</tr>
</table>
</body>
</html>
learnMedlem sedan jan. 20051 130 inlägg Båda verkar fungera finfint! Men för att slippa dubbelklicka väljer jag nog zcorpan's.
Det finns väl inga svagheter med det? Funkar i de flesta webläsarna? Vågar jag använda det på en viktig webbplats?
Tack
learnMedlem sedan jan. 20051 130 inlägg
Det finns väl inga svagheter med det? Funkar i de flesta webläsarna? Vågar jag använda det på en viktig webbplats?
Det funkar inte i IE... Då hamnar det en kryssruta ovanför rutan... Hjälp!!
zcorpanMedlem sedan dec. 20042 245 inlägg IE saknar stöd för position:fixed, därför syns kryssrutorna. De försvinner om vi använder margin-top istället. Sedan kanske det kan behövas lite javascript för att kunna se vilka som är markerade för IE som saknar stöd för :checked och syskon-selektorn ("+").
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
input { position:fixed; margin-top:-10cm; }
label { background:red; padding:1em; display:block; }
input:checked + label { background:lime; }
label.checked { background:lime; } /* msie */
input:focus + label { outline:thin dotted; }
</style>
<!--[if IE]>
<script type="text/javascript">
window.onload = function() {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; ++i) {
inputs[i].onclick = function() {
this.nextSibling.className = this.checked ? "checked" : null;
}
}
}
</script>
<![endif]-->
</head>
<body>
<form action="">
<table>
<tbody>
<tr>
<td><input type="checkbox" id="a"><label for="a">a</label></td>
<td><input type="checkbox" id="b"><label for="b">b</label></td>
</tr>
<tr>
<td><input type="checkbox" id="c"><label for="c">c</label></td>
<td><input type="checkbox" id="d"><label for="d">d</label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
