Jquery 如何在html代码中创建可折叠列_Jquery_Html_Css

Jquery 如何在html代码中创建可折叠列

jquery html css

Jquery 如何在html代码中创建可折叠列,jquery,html,css,Jquery,Html,Css,请看下图默认情况下，表的视图应与表1相似（以+符号开头）。当我们单击+号时，行应该在下一行中展开，并且符号应该更改为–（减号）。同样，当我们点击–符号时，应该再次折叠，现在应该出现+符号我已经将上面的代码粘贴到下面，但无法确定需要对此功能进行哪些更改。有人能帮忙吗 <!DOCTYPE html> <html lang="en"> <head> <meta name="gwt:property" content="locale=en_US"&

请看下图

默认情况下，表的视图应与表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>


平{
背景色：#FFFFFF；
}
奇数{
背景色：#EEEEEE；
}
专栏1
专栏2
+国家
印度
欧洲
亚洲
俄罗斯

当您说“行应在下一行中展开”是什么意思。另外，您是否有任何javascript可以提供给我们，您正在使用？谢谢我的意思是，在第1列中按下+号，值的扩展在第2列中发生。这也可以在表格图片中看到。现在我没有使用任何js文件。你能帮个忙吗？你用标签标记了这个问题，所以我想这就是你要处理的问题。如果您想使用侦听器，我建议您使用selector.on（'click'，函数）；调用一个函数来切换列的高度或隐藏除第一列以外的所有列。可以找到有关该功能的文档。您也可以通过使用内联onclick事件来避免jquery，但这取决于您的偏好。请您帮助在我的代码中添加此更改。我需要它尽快。