Display rows in table on change of dropdown

by **ajoo** on Thu Jun 26, 2008 8:43 pm

Hi,
Does any one have a script which will display the fields in my output table based on what user selects from dropdown.
Please see html below:
Here is what I need to do. When user first loads the page they should be able to see all recods. After that when they select any value only those rows should be select. For example if user selects Active from dropdown only rows with active status should be selected.
Also if can it be done with CSS?
Thanks in advance
<html>
<head>
<title>Test</title>

</head>

<body>

<table align ="center" border="1" width="50%" cellspacing="0" cellpadding="4">
<tr>
<td>
<SELECT NAME="mylist" onChange="doit(this)">
<OPTION VALUE="m1">All
<OPTION VALUE="m2">No Owner Assigned
<OPTION VALUE="m3">Active
<OPTION VALUE="m4">Not Found

</SELECT>
</td>
</tr>
</table>
<br><br><br><br>
<table align ="center" border="1" width="50%" id="username" cellspacing="0" cellpadding="4">
<tr class="tabletitle">
<td class="tabletitle">ID</td>
<td class="tabletitle">First Name</td>
<td class="tabletitle">Last Name</td>
<td class="tabletitle">Status</td>
</tr>
<tr class="light">
<td class="white" >0001</td>
<td class="white" >Chris</td>
<td class="white" >kay</td>
<td class="white" >No Owner Assigned</td>
</tr>
<tr class="light" >
<td class="white" >0002</td>
<td class="white" >Sanjeev</td>
<td class="white" >Kumar</td>
<td class="white" >Active</td>

</tr>
<tr class="light" >
<td class="white" >0003</td>
<td class="white" >John</td>
<td class="white" >Font</td>
<td class="white" >Not Found</td>

</tr>
<tr class="light" >
<td class="white" >0004</td>
<td class="white" >Ram</td>
<td class="white" >Kumar</td>
<td class="white" >Not Found</td>

</tr>
<tr class="light" >
<td class="white" >0005</td>
<td class="white" >Amit</td>
<td class="white" >Goel</td>
<td class="white" >Active</td>

</tr>

<table>

</body>
</html>

by **rangana** on Fri Jun 27, 2008 3:02 am

Yes, possible, but you have to assign a new class name to to the rows which will affect the dropdown choices. This modification might work:

Code: Select all: <html> <head> <title>Test</title> <style type="text/css"> .hide{display:none;} </style> <script type="text/javascript"> /************Script Notification******************* * Author: Raymond Angana * rangana in Devppl * Created June 27 * Title: Script to show row base on status * This notice must stay intact for legal use ***********End of notice**************************/ window.onload=function() { var dropRang=document.getElementsByName('mylist')[0],trRang,def; dropRang.onchange=function() { trRang=document.getElementsByTagName('tr'); def='light '; // Set previous classname reset(); for(var i=0;i<trRang.length;i++) { if(trRang[i].className==def+this.value) { trRang[i].style.display=''; } } } } function reset() { var trRang=document.getElementsByTagName('tr'); for(var i=2;i<trRang.length;i++){trRang[i].style.display='none';}} </script> </head> <body> <table align ="center" border="1" width="50%" cellspacing="0" cellpadding="4"> <tr> <td> <SELECT NAME="mylist"> <OPTION VALUE="m1">All <OPTION VALUE="m2">No Owner Assigned <OPTION VALUE="m3">Active <OPTION VALUE="m4">Not Found </SELECT> </td> </tr> </table> <br><br><br><br> <table align ="center" border="1" width="50%" id="username" cellspacing="0" cellpadding="4"> <tr class="tabletitle"> <td class="tabletitle">ID</td> <td class="tabletitle">First Name</td> <td class="tabletitle">Last Name</td> <td class="tabletitle">Status</td> </tr> <tr class="light m2"> <td class="white" >0001</td> <td class="white" >Chris</td> <td class="white" >kay</td> <td class="white" >No Owner Assigned</td> </tr> <tr class="light m3" > <td class="white" >0002</td> <td class="white" >Sanjeev</td> <td class="white" >Kumar</td> <td class="white" >Active</td> </tr> <tr class="light m4" > <td class="white" >0003</td> <td class="white" >John</td> <td class="white" >Font</td> <td class="white" >Not Found</td> </tr> <tr class="light m4" > <td class="white" >0004</td> <td class="white" >Ram</td> <td class="white" >Kumar</td> <td class="white" >Not Found</td> </tr> <tr class="light m3" > <td class="white" >0005</td> <td class="white" >Amit</td> <td class="white" >Goel</td> <td class="white" >Active</td> </tr> <table> </body> </html>

See if it helps

Display rows in table on change of dropdown

Display rows in table on change of dropdown

Who is online