I have following HTML Table, what i want to do is i want to hide this table in a page using Javascript, problem is that i dont have control on the HTML ( the table is displaying dynamically from a CMS in a page ), so i want to keep it hidden using Javascript, is that possible without the table having id ?
Whatever is used to insert the table, surround it with a div that you can hide. <html> <head> <script type="text/javascript"> function hideTable() { document.getElementById('table').style.visibility = 'hidden'; } </script> </head> <body> <div id='table'> <table> <tr><td>Table</td></tr> </table> </div> <button onclick="hideTable()">Hide Table</button> </body> </html> Code (markup):
Thats the problem i cannot add anything to it because that Table is coming dynamically which i dont have any control. I mean its nested table inside table etc...
Yeah, not having an ID is a problem but you can hide all tables on the page with this: <html> <head> <script type="text/javascript"> function hideTable() { var tables = document.getElementsByTagName('table'); for (i=0; i<tables.length; i++) { tables[i].style.visibility = 'hidden'; } } </script> </head> <body> <table> <tr><td>Table 1</td></tr> </table> <table> <tr><td>Table 2</td></tr> </table> <button onclick="hideTable()">Hide Tables</button> </body> </html> Code (markup):
You have to be able to select it uniqely in the DOM. Is it always the first table on the page (or second or third...?) If so you can select the first table in the DOM and hide it with out the need of any id's.