javascript - 重新创建涂鸦手风琴桌

Question

在我当前的 Web 项目中，我必须实现一个包含一个月中所有日期的表，从而产生 ~30-31 个表列。由于这么大的表格不是很漂亮，我想实现类似于 Doodle Polls 的表格。涂鸦折叠一张桌子，用图片替换隐藏的列，如果您单击该图片，它会展开列 -> 显示隐藏的列。

但是我如何实现这样的行为呢？我是 Javascript 新手，不太熟悉花哨的 CSS3 技术。

特别是，如何用图片替换隐藏的列？我发现的教程只允许隐藏特定列而不是替换它们。

PS：我还标记了 RoR，因为我正在处理的项目是使用 RoR 构建的，也许还有一个 Rails 解决方案可以解决这个问题？

PP:

Answer 1

您可以先隐藏要隐藏的列，然后在表格中显示一个带有图像的列。单击图像（折叠）时，您可以隐藏包含图片的列并使其他列再次可见。这实际上并不是关于一些花哨的 css3 东西，但您需要有关如何通过 javascript（隐藏/显示）元素与 DOM 元素交互的基本知识。这应该够了吧。

请参阅w3schools 上的本教程。您所需要的只是获取您需要的元素（图像列和隐藏列中的所有 TD），然后对它们应用 css 样式（隐藏/可见）。