时间戳

首页 > 解决方案 > 如何在 html 代码中制作可折叠的列

jquery - 如何在 html 代码中制作可折叠的列

问题描述

请看下图。

表格图

默认情况下，表的视图应该与表 1 相似（以 + 开头）。当我们单击 + 号时，行应在下一个扩展，符号应更改为 -（减号）。同样，当我们单击 - 符号时，应该会再次折叠并且现在应该出现 + 符号。

我已将上面的代码粘贴在下面，但无法弄清楚需要对此功能进行哪些更改。有人可以帮忙吗。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="gwt:property" content="locale=en_US">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
    tr.even {
      background-color: #FFFFFF;
    }
    tr.odd {
      background-color: #EEEEEE;
    }
  </style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td width="5%"></td>
        <td>
          <table border="1" cellpadding="5" cellspacing="0">
            <thead>
              <tr style="font-size:16px; background-color:lightgray;">
                <th><a name="table">&nbsp;</a>Column1</th>
                <th>Column2</th>
              </tr>
            </thead>
            <tbody>
              <tr class="odd">
                <td>+ Country</td>
                <td>
                  <p>India</p>
                  <p>Europe</p>
                  <p>Asia</p>
                  <p>Russia</p>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td width="5%"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

标签： jqueryhtmlcss

解决方案

推荐阅读