I'm trying to make a table that will hide multiple rows in single js functions... now I put together a way to do it, but it requires multiple id declarations in the functions, is there any way to do it with classes instead of IDs, so that I can have a blanket class that I can use? See: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript hide table row</title> </head> <body> <script type="text/javascript"> function display2B(){ var row = document.getElementById("2B-1");if (row.style.display == '') row.style.display = 'none';else row.style.display = ''; var row = document.getElementById("2B-2");if (row.style.display == '') row.style.display = 'none';else row.style.display = ''; } function display1B(){ var row = document.getElementById("1B-1");if (row.style.display == '') row.style.display = 'none';else row.style.display = ''; var row = document.getElementById("1B-2");if (row.style.display == '') row.style.display = 'none';else row.style.display = ''; } </script> <p><a href="javascript: display1B();">Show / Hide First Base</a></p> <p><a href="javascript: display2B();">Show / Hide Second Base</a></p> <table width="300" border="1"> <tr class="topRow"><th>Name</th><th>Position</th><th>Average</th></tr> <tr id="2B-1"><td>Joe Secondbase</td><td>2B</td><td>.259</td></tr> <tr id="2B-2"><td>Bill Secondbase</td><td>2B</td><td>.292 </td></tr> <tr id="1B-1"><td>Ralph Firstbase</td><td>1B</td><td>.223 </td></tr> <tr id="1B-2"><td>Mickey Firstbase</td><td>1B</td><td>.249 </td></tr> </table> </body> </html> Code (markup):
i tackled the same problem a few weeks ago, and found this function: function getElementsByClass(searchClass, node, tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } Code (markup): and i use it like this: function toggleEnabled(enabled) { if (enabled == undefined) { enabled = true; } var trs = getElementsByClass('not_enabled'); for (i in trs) { trs[i].style.display = enabled ? 'table-row' : 'none'; } } Code (markup): and the checkbox to toggle the rows: <span id="show_enabled_container"> Show Only Enabled <input type="checkbox" id="show_enabled" checked="checked" onchange="toggleEnabled(!this.checked);" /> </span> HTML:
Thanks for the help.. I have made some strides... but... now I have another question - haha I tried to modify the code to work for me, but apparently I didn't do a good job. I changed the regex to indexOf, because I want to see if the class contains the text - not if the class IS the text. The reason is, players can be multiple positions. I'm using PHP to output the positions it's all coming from mySQL. So if the particular player is multiple positions it outputs it as such <tr class="pos-POSITION1-POSITION2-...> for example <tr class="pos-T2B-T1B-LF">... if he is just one position it is outputted as such <tr class="pos-T1B"> Am I doing something wrong with my code - or what? Thanks so much for the help, see below for the code, I also have it running at http colon // www DOT shopforeveryone DOT com / test DOT php (I can't have links in my posts yet) Thanks <html> <head> <title>TEST</title> <script type="text/javascript"> function getElementsByClassName(node,classname) { if (node.getElementsByClassName) {return node.getElementsByClassName(classname);} else { // your custom function } } function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ){node = document;} if ( tag == null ){tag = '*';} var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new indexOf(searchClass); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } function toggle(el) { if (el.style.display === '') { el.style.display = 'none'; } else { el.style.display = ''; } } function display2B() { var els = getElementsByClassName(document, 'T2B'); var i; for (i = 0; i < els.length; i += 1) { toggle(els[i]); } } function display1B() { var els = getElementsByClassName(document, 'T1B'); var i; for (i = 0; i < els.length; i += 1) { toggle(els[i]); } } </script> </head> <body> <p><a href="javascript: display1B();">Toggle First Basemen</a></a></p> <p><a href="javascript: display2B();">Toggle Second Basemen</a></a></p> <table> <tr style="background:black;color:white;"><td>Position(s)</td><td>Name</td><td>Note</td></tr> <tr class="T2B" style="background:#A8A8A8;"><td>Seond Base</td><td>Works, because class is just T2B</td><td>Ralph Secondbase</td></tr> <tr class="T1B" style="background:#A8A8A8;"><td>First Base</td><td>Works, because class is just T1B</td><td>Mike Fistbase</td></tr> <tr class="pos-T1B"><td>First Base</td><td>Does not work (class is pos-T1B)</td><td>Joey Firstbase</td></tr> <tr class="pos-T1B-T2B"><td>First Base, Second Base</td><td>Does not work (class is pos-T1B-T2B)</td><td>Joey Firstbase Secondbase</td></tr> <tr class="pos-T2B-T1B"><td>Second Base, First Base</td><td>Does not work (class is pos-T2B-T1B)</td><td>Mike Secondbase FirstBase</td></tr> <tr class="pos-T2B"><td>Seond Base</td><td>Does not work (class is pos-T2B)</td><td>Bill Secondbase</td></tr> </table> </body> </html> Code (markup):
afaik, indexOf is a function not a class also, instead of having classes pos-T1, pos-T2, pos-T1-T2, you can have multiple classes (which the script i gave you support with the regular expression) <tr class="T1B"><td>First Base</td><td>Does not work (class is pos-T1B)</td><td>Joey Firstbase</td></tr> <tr class="T1B T2B"><td>First Base, Second Base</td><td>Does not work (class is T1B T2B)</td><td>Joey Firstbase Secondbase</td></tr> <tr class="T2B T1B"><td>Second Base, First Base</td><td>Does not work (class is T2B T1B)</td><td>Mike Secondbase FirstBase</td></tr> <tr class="T2B"><td>Seond Base</td><td>Does not work (class is T2B)</td><td>Bill Secondbase</td></tr> Code (markup):