element 表格中点击下拉展示子表格

要在表格中添加点击下拉展示子表格的功能，您可以使用JavaScript来实现。以下是一个简单的示例代码：

HTML部分：

<table>
  <tr>
    <th>Element</th>
    <th>Description</th>
  </tr>
  <tr class="parent">
    <td class="dropdown">Element 1</td>
    <td>Description 1</td>
  </tr>
  <tr class="child">
    <td colspan="2">
      <table>
        <tr>
          <th>Sub Element</th>
          <th>Sub Description</th>
        </tr>
        <tr>
          <td>Sub Element 1</td>
          <td>Sub Description 1</td>
        </tr>
        <tr>
          <td>Sub Element 2</td>
          <td>Sub Description 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="parent">
    <td class="dropdown">Element 2</td>
    <td>Description 2</td>
  </tr>
  <tr class="child">
    <td colspan="2">
      <table>
        <tr>
          <th>Sub Element</th>
          <th>Sub Description</th>
        </tr>
        <tr>
          <td>Sub Element 3</td>
          <td>Sub Description 3</td>
        </tr>
        <tr>
          <td>Sub Element 4</td>
          <td>Sub Description 4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS部分：

.child {
  display: none;
}

JavaScript部分：

var dropdowns = document.getElementsByClassName('dropdown');

for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].addEventListener('click', function() {
    var child = this.parentNode.nextElementSibling;
    if (child.classList.contains('child')) {
      if (child.style.display === 'none') {
        child.style.display = 'table-row';
      } else {
        child.style.display = 'none';
      }
    }
  });
}

这个示例中，我们使用了classList和style属性来控制子表格的显示和隐藏。初始状态下，子表格的display属性被设置为none，使其隐藏。当点击父级表格中的下拉元素时，通过切换子表格的display属性来实现展示和隐藏的效果