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  8941  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: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
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: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
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: 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: 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: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
