首页html点击a标签就显示一个新表格的js代码

html点击a标签就显示一个新表格的js代码

时间: 2024-11-05 20:28:57 浏览: 19

HTML中的`<a>`标签通常用于创建链接，如果你想通过点击链接动态地展示一个新的表格，你可以结合JavaScript来实现这个功能。这里是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>点击显示表格</title> <style> #hiddenTable { display: none; } </style> </head> <body> <a href="#" id="showTableLink">点击显示表格</a> <table id="hiddenTable">  <tr><th>标题1</th><td>数据1</td></tr>  </table> <script> document.getElementById('showTableLink').addEventListener('click', function() { var table = document.getElementById('hiddenTable'); if (table.style.display === 'none') { table.style.display = 'block'; } else { table.style.display = 'none'; } }); </script> </body> </html> ``` 在这个示例中，当用户点击带有id "showTableLink" 的链接时，会触发JavaScript事件监听器，它检查表格的`display`样式。如果隐藏 (`none`)，则显示表格；如果已显示，则隐藏表格。

阅读全文