html - Javascript <tbody> swapping not working -
i've got couple tables content should change based on clicking buttons (in case, links). i've used javascript code elsewhere successfully, though 1 parameter in switchid() function (there 1 table mess around with). keep researching examples of , seem passing variables correctly, doing wrong? code doesn't work on chrome or ie:
edit: per comments, able whittle javascript section down single, smaller function, should same thing. have made change below. still doesn't work, though.
i changed "array" , "x" variables "jonarray" , "jonx" avoid chances of 1 of being reserved word.
<!doctype html> <html> <body> <script type="text/javascript"> var toptable = new array('english','spanish'); var bottomtable = new array('japanese','italian'); function switchid(jonarray,jonx) { for(var i=0;i<jonarray.length();i++) { document.getelementbyid(jonx).style.display='none'; } document.getelementbyid(jonx).style.display='table-row-group'; } </script> <table border='1'> <thead> <tr><td>odds</td><td>evens</td></tr> </thead> <tfoot> <tr><td><a href="javascript:switchid('toptable','english')">english</a></td><td><a href="javascript:switchid('toptable','spanish')">spanish</a></td></tr> </tfoot> <tbody id='english'> <tr><td>one</td><td>two</td></tr> <tr><td>three</td><td>four</td></tr> </tbody> <tbody id='spanish' style="display:none;"> <tr><td>uno</td><td>dos</td></tr> <tr><td>tres</td><td>quatro</td></tr> </tbody> </table> <br /> <table border='1'> <thead> <tr><td>odds</td><td>evens</td></tr> </thead> <tfoot> <tr><td><a href="javascript:switchid('bottomtable','japanese')">japanese</a></td><td><a href="javascript:switchid('bottomtable','italian')">italian</a></td></tr> </tfoot> <tbody id='japanese'> <tr><td>ichi</td><td>ni</td></tr> <tr><td>san</td><td>shi</td></tr> </tbody> <tbody id='italian' style="display:none;"> <tr><td>un</td><td>due</td></tr> <tr><td>tre</td><td>quattro</td></tr> </tbody> </table> </body> </html>
i made sure function , variables available regardless of when created.
i gave variables descriptive names, cleaned , stored table data in single object.
javascript
window.switchid = function (table, language) { var tables = { 'top': ['english', 'spanish'], 'bottom': ['japanese', 'italian'] }; (var = 0; < tables[table].length; i++) { document.getelementbyid(tables[table][i]).style.display = 'none'; } document.getelementbyid(language).style.display = 'table-row-group'; } html
<table border='1'> <thead> <tr> <td>odds</td> <td>evens</td> </tr> </thead> <tfoot> <tr> <td><a href="javascript:switchid('top','english');">english</a> </td> <td><a href="javascript:switchid('top','spanish')">spanish</a> </td> </tr> </tfoot> <tbody id='english'> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td>four</td> </tr> </tbody> <tbody id='spanish' style="display:none;"> <tr> <td>uno</td> <td>dos</td> </tr> <tr> <td>tres</td> <td>quatro</td> </tr> </tbody> </table> <br /> <table border='1'> <thead> <tr> <td>odds</td> <td>evens</td> </tr> </thead> <tfoot> <tr> <td><a href="javascript:switchid('bottom','japanese')">japanese</a> </td> <td><a href="javascript:switchid('bottom','italian')">italian</a> </td> </tr> </tfoot> <tbody id='japanese'> <tr> <td>ichi</td> <td>ni</td> </tr> <tr> <td>san</td> <td>shi</td> </tr> </tbody> <tbody id='italian' style="display:none;"> <tr> <td>un</td> <td>due</td> </tr> <tr> <td>tre</td> <td>quattro</td> </tr> </tbody> </table>
Comments
Post a Comment