Hide Table Rows with onChange()
On occasion, a developer will require that certain elements of a page stay invisible to users while others become visible, depending on a user's action. In this case, the user makes a selection on a drop-down menu and the selected table row becomes visible while the rest remain hidden.
First, we establish the script and begin to define the function:
-
<!--
-
-
function changeRow() {
Next, we find the number of elements in the select menu. This count is especially useful for dynamically-generated menus when the developer may not always know the number of available elements at design time:
-
var intCount = document.getElementById("selTest").options.length; //gets count of items in select menu
We also need the number in the zero-indexed array of the selected element:
-
var intValue = document.getElementById("selTest").selectedIndex; //gets number (0 index) of selected item
Now we loop through the number of elements in the menu:
-
for (i=0;i
With the document.getElementById(strValue) function, a developer can assign the area he'd prefer to make visible. We're using table rows here, but this same technique applies to any div, span, or form field.
The onchange() function in the select menu calls the function that sets the selected row's style:
For each row, we assign the id value to the range of options available in the menu. Each row has its default style set to visibility:hidden;. Again, this is very useful for database-generated forms and tables:
If you need the elements in a page to cover the same area, you can change the visibility:hidden; lines to display:none; and the visibility:visible; to display:;. This script is also useful for any desired style change (font size, font color, etc.). For such a simple script, it packs a wide variety of uses.
Want an avatar? Get a gravatar! • You can link to this comment
For accessibility purposes I suggest looping through TR’s with javascript and add the style.visibility = “hidden” so that in the event a user has JavaScript disabled they will still see the table values. See my example below
function hideRows() {
var allRows = document.getElementsByTagName("tr");
for (i=0; i < allRows.length; i++) {
if(allRows[i].id != "option") {
allRows[i].style.visibility='hidden';
}
}
}
function changeRow() {
var intCount = document.getElementById("selTest").options.length; //gets count of items in select menu
var intValue = document.getElementById("selTest").selectedIndex; //gets number (0 index) of selected item
for (i=0;i<intCount;i++){
var strValue = document.getElementById("selTest")[i].value; //gets value of selected item
if (i == intValue) {
document.getElementById(strValue).style.visibility='visible';
}
else {
document.getElementById(strValue).style.visibility='hidden';
}
}
}
// Event Handler
function addEvent(obj, evType, fn) {
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent) {
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else { return false; }
}
addEvent(window, 'load', hideRows);
P.S. Your code snippets are not showing everything. I had to go to demo page to see all the code.
Want an avatar? Get a gravatar! • You can link to this comment
very good tutorial