i'm trying to hide/show table columns when a checkbox is checked or not. This is working but not really the way i need it. I need the checkboxes to stay checked after a form is submitted and the columns to stay
Thanks in advance for any help
This is what i've got so far
<!DOCTYPE html>
<html>
<head>
<title>javascript test</title>
<meta charset="utf-8">
<script src="http://ift.tt/Y75GEe"></script>
<style>
table ,td ,th{
border-collapse: collapse;
border: 1px solid black;
}
td, th{
min-width: 150px;
}
th{
padding: 15px;
}
td{
padding: 10px;
}
body{
font-family: arial;
}
</style>
<script>
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="suche">
<input type="submit" name="senden">
<br/>
<br/>
</form>
<form>
<label>Spalte1<input type="checkbox" name="col1"></label>
<label>Spalte2<input type="checkbox" name="col2"></label>
<label>Spalte3<input type="checkbox" name="col3"></label>
<label>Spalte4<input type="checkbox" name="col4"></label>
<label>Spalte5<input type="checkbox" name="col5"></label>
<label>Spalte6<input type="checkbox" name="col6"></label>
</form>
<br/>
<br/>
<table>
<tr>
<th class="col1">Spalte1</th>
<th class="col2">Spalte2</th>
<th class="col3">Spalte3</th>
<th class="col4">Spalte4</th>
<th class="col5">Spalte5</th>
<th class="col6">Spalte6</th>
</tr>
<tr>
<td>Spalte1</td>
<td>Spalte2</td>
<td>Spalte3</td>
<td>Spalte4</td>
<td>Spalte5</td>
<td>Spalte6</td>
</tr>
</table>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire