Hello,
I am working on a web report, I have a script that if the user checks the check box then it hides the column.
This works well, but I was wondering if there is a way that I could have all my columns hidden when the page loads, then if the user checks the check box the column will appear.
this is an example of the code that I have
I am working on a web report, I have a script that if the user checks the check box then it hides the column.
This works well, but I was wondering if there is a way that I could have all my columns hidden when the page loads, then if the user checks the check box the column will appear.
this is an example of the code that I have
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery-latest.js"></script>
</head>
<body>
<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>
<form name="myform">
<p><br />
<br />
<br />
<input name="col4" id="1" type="checkbox" />
Hide/Show Column 4
<input name="col3" id="2" type="checkbox" />
Hide/Show
Column
3
<input name="col2" id="3" type="checkbox" />
Hide/Show Column
2
<input name="col1"id="4" type="checkbox" />
Hide/Show Column
1</p>
<p><br />
</p>
</form>
<table>
<thead>
</thead>
<tr>
<td><input type="text" name="qty" value="10" /></td>
<td><input type="text" name="prcbook"value="25" onchange="startCalc4();" /></td><td> <input type="text" name="total" value="" /></td><td><input name="Input" type="text" value="35" /></td></tr>
</table>
</body>
</html>