Element 表格下拉展开子表格 - JavaScript 实现

{"title":"Element 表格下拉展开子表格 - JavaScript 实现","description":"使用 JavaScript 在 Element 表格中实现点击下拉展开子表格的功能。代码示例包含 HTML、CSS 和 JavaScript 部分，帮助您轻松实现动态表格展示。","keywords":"element 表格, 下拉展开, 子表格, JavaScript, 动态表格, 代码示例, HTML, CSS","content":""在表格中添加点击下拉展示子表格的功能，您可以使用 JavaScript 来实现。以下是一个简单的示例代码：\n\nHTML 部分：\n\nhtml\\n<table>\\n <tr>\\n <th>Element</th>\\n <th>Description</th>\\n </tr>\\n <tr class=\"parent\">\\n <td class=\"dropdown\">Element 1</td>\\n <td>Description 1</td>\\n </tr>\\n <tr class=\"child\">\\n <td colspan=\"2\">\\n <table>\\n <tr>\\n <th>Sub Element</th>\\n <th>Sub Description</th>\\n </tr>\\n <tr>\\n <td>Sub Element 1</td>\\n <td>Sub Description 1</td>\\n </tr>\\n <tr>\\n <td>Sub Element 2</td>\\n <td>Sub Description 2</td>\\n </tr>\\n </table>\\n </td>\\n </tr>\\n <tr class=\"parent\">\\n <td class=\"dropdown\">Element 2</td>\\n <td>Description 2</td>\\n </tr>\\n <tr class=\"child\">\\n <td colspan=\"2\">\\n <table>\\n <tr>\\n <th>Sub Element</th>\\n <th>Sub Description</th>\\n </tr>\\n <tr>\\n <td>Sub Element 3</td>\\n <td>Sub Description 3</td>\\n </tr>\\n <tr>\\n <td>Sub Element 4</td>\\n <td>Sub Description 4</td>\\n </tr>\\n </table>\\n </td>\\n </tr>\\n</table>\\n\n\nCSS 部分：\n\ncss\\n.child {\\n display: none;\\n}\\n\n\nJavaScript 部分：\n\njavascript\\nvar dropdowns = document.getElementsByClassName('dropdown');\\n\\nfor (var i = 0; i < dropdowns.length; i++) {\\n dropdowns[i].addEventListener('click', function() {\\n var child = this.parentNode.nextElementSibling;\\n if (child.classList.contains('child')) {\\n if (child.style.display === 'none') {\\n child.style.display = 'table-row';\\n } else {\\n child.style.display = 'none';\\n }\\n }\\n });\\n}\\n\n\n这个示例中，我们使用了classList和style属性来控制子表格的显示和隐藏。初始状态下，子表格的display属性被设置为none，使其隐藏。当点击父级表格中的下拉元素时，通过切换子表格的display属性来实现展示和隐藏的效果。\n"}