This code snippet is just a little bit of fun.
It demonstrates how you use JavaScript and CSS to show or hide columns in a table depending on whether or not a checkbox corresponding with the column is checked. - <html>
-
<head>
-
<script type="text/javascript">
-
function ShowHideField(header, gridID, checkboxElement) {
-
var theGrid = document.getElementById(gridID);
-
var displayValue;
-
-
if (checkboxElement.checked) {
-
displayValue = "";
-
} else {
-
displayValue = "none";
-
}
-
-
-
if (theGrid != null) {
-
var theHeaders = theGrid.getElementsByTagName("th");
-
var theRows = theGrid.getElementsByTagName("tr");
-
var numHeaders = theHeaders.length;
-
var numRows = theRows.length;
-
var i;
-
var foundHeader = false;
-
//searching through the headers in the grid for one that matches the header value provided
-
for (i = 0; i < numHeaders && foundHeader==false; i++) {
-
var headerText = theHeaders[i].innerHTML;
-
if (headerText == header) {
-
//once found the header, set the header's display value to display or not depending on what was provided
-
foundHeader = true;
-
theHeaders[i].style.display = displayValue;
-
var j;
-
for (j = 0; j < numRows; j++) {
-
//looping through all of the rows in the grid and setting each cell in the column to display or not.
-
var cells = theRows[j].getElementsByTagName("td");
-
if (cells.length > i) {
-
cells[i].style.display = displayValue;
-
}
-
}
-
-
}
-
}
-
}
-
-
}
-
</script>
-
</head>
-
-
<body>
-
<form>
-
-
<input type="checkbox" onclick="ShowHideField('Field 1', 'grid', this)" id="Field1" checked="true" /><label for="Field1">Field 1</label><br />
-
<input type="checkbox" onclick="ShowHideField('Field 2', 'grid', this)" id="Field2" checked="true" /><label for="Field2">Field 2</label><br />
-
<input type="checkbox" onclick="ShowHideField('Field 3', 'grid', this)" id="Field3" checked="true" /><label for="Field3">Field 3</label><br />
-
<input type="checkbox" onclick="ShowHideField('Field 4', 'grid', this)" id="Field4" checked="true" /><label for="Field4">Field 4</label><br />
-
<br />
-
-
<table id="grid">
-
<tr>
-
<th>Field 1</th>
-
<th>Field 2</th>
-
<th>Field 3</th>
-
<th>Field 4</th>
-
</tr>
-
<tr>
-
<td>1,1</td>
-
<td>2,1</td>
-
<td>3,1</td>
-
<td>4,1</td>
-
</tr>
-
<tr>
-
<td>1,2</td>
-
<td>2,2</td>
-
<td>3,2</td>
-
<td>4,2</td>
-
</tr>
-
<tr>
-
<td>1,3</td>
-
<td>2,3</td>
-
<td>3,3</td>
-
<td>4,3</td>
-
</tr>
-
</table>
-
</form>
-
</body>
-
-
</html>
Happy Coding!
-Frinny
0  8943  Sign in to post your reply or Sign up for a free account.
Similar topics
by: oLE |
last post by:
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide...
|
by: Tim |
last post by:
Hi,
I am trying to hide the datagrid row header (the left most column that has
the 'select' triangle in it which moves with the selected row). It seems to
be fairly simple;...
|
by: Jerad Rose |
last post by:
I searched for a while trying to find the answer to this, but to no avail.
I am trying to find the best way (or any way) to dynamically show and hide
groups of TR's. For example, I have a...
|
by: lydia sista via DotNetMonster.com |
last post by:
hi! help...
How do you show/hide item's data?
Like sale item on product catalogue.
I want to show the sale image when the status of product is on sale.
in my catalogue I use datalist:...
|
by: jeet_sen |
last post by:
Hi,
I have created a table colelcting data from an XML source.
After I built the whole table I ahve given user options to filter out
columns from the table.
For this I have collected all the...
|
by: pamate |
last post by:
hi,
I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers.
...
|
by: Liquidtouch |
last post by:
I have been searching on this for awhile and cant find anything and playing around with it got me no where. I will start with what I am after and then explain what I have.
I have a table with 3...
|
by: rupak |
last post by:
Hi!
I have a multiple selection of checkboxes
<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input...
|
by: oranoos3000 |
last post by:
hi
would you please help me
i have a online shopping center that i show pictures of the my product in home page.
in the InterExplorer pictures is shown correctly but in Firefox browser is shown...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
| |
