Ik heb een tabel, met 3 rijen. In iedere rij staat een radio. Ik wil dat als er ergens in een rij wordt geklikt dat hij de radio in die rij selecteerd. Hoe doe ik dat?
Ik weet dat het kan want bij PHPMyAdmin hebben ze het ook. Doe ik dit met javascript? Of wat?
even ter informatie, bij phpMyAdmin zijn het checkboxjes. Maar dit zul je op de een of andere manier met JavaScript moeten oplossen inderdaad. Helaas ben ik hier niet zo bekend in.
Dit is nu juist een geval waarin het gebruik van tabellen semantisch correct is. Je laat een rijtje tabellarische gegevens zien, dus ga niet lopen klooien met labels en divs.
Ik heb een voorbeeld gemaakt, maar het is nog niet klaar. Je kunt nu namelijk alleen de checkbox aan- of uitvinken door op de tabelrij te klikken. Klikken op de checkbox zelf heeft geen resultaat. Ik geef alvast de code, zodat iedereen kan kijken:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Select checkbox</title>
<style type="text/css">
table {
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 5px;
font: 12px verdana;
}
</style>
<script type="text/javascript">
function init () {
var x = document.getElementsByTagName ('tr');
var n = x.length;
for (i = 0; i < n; i++) {
x[i].onclick = function () {
return handle_checkbox (this);
}
}
}
function handle_checkbox (obj) {
var x = obj.getElementsByTagName ('input')[0];
(x.checked) ? (x.checked = false) : (x.checked = true);
}
window.onload = init;
</script>
</head>
<body>
<table>
<tr>
<td><input name="delete[]" type="checkbox"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
<tr>
<td><input name="delete[]" type="checkbox"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
<tr>
<td><input name="delete[]" type="checkbox"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
<tr>
<td><input name="delete[]" type="checkbox"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
</table>
</body>
</html>
Iets specifieker? Ik heb je net een hele code voorgekauwd!!!
Hier, vanwege de kerstgedachte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Select checkbox</title>
<style type="text/css">
table {
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 5px;
font: 12px verdana;
}
</style>
<script type="text/javascript">
function init () {
var x = document.getElementsByTagName ('tr');
var n = x.length;
for (i = 0; i < n; i++) {
x[i].onclick = function () {
return handle_radio (this);
}
}
}
function handle_radio (obj) {
var x = obj.getElementsByTagName ('input')[0];
(x.checked) ? (x.checked = false) : (x.checked = true);
}
window.onload = init;
</script>
</head>
<body>
<table>
<tr>
<td><input name="delete[]" type="radio"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
<tr>
<td><input name="delete[]" type="radio"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
<tr>
<td><input name="delete[]" type="radio"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
<tr>
<td><input name="delete[]" type="radio"></td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
<td>dit is een rij in de tabel</td>
</tr>
</table>
</body>
</html>
Het werkt niet. Je kunt alleen de eerste radio button selecteren, bij mij dan, dat komt omdat ik veel tabellen op die pagina nodig heb. Hij pakt dus alle tr's over de hele pagina dus in iedere tr die je aanklikt wordt hij geselecteerd of gedeselecteerd. Hoe los ik dit op? Mss met een naam voor de tabel waarin hij dat mag doen? En die naam ergens opgeven in het javascript?
Mss kom ik dan verder, ik weet namelijk zelf niet echt waar ik op kan zoeken.
mod-edit:
Bumpen
Bumpen is het herhaaldelijk posten in je eigen topic om hem weer bovenaan in de lijst te krijgen. Omdat het zéér opdringerig overkomt is bumpen is pas na 24 uur toegestaan. Bumpen kan een reden zijn voor de admins en mods om een topic te sluiten. Gebruik het knopje om je tekst aan te passen indien nodig.
knopje om je tekst aan te passen indien nodig.