javascript - 带有 HTML 表格的 jQuery Isotope 库

Question

在处理大量需要简单排序/过滤系统的表格数据时，我发现了 Isotope 库，它似乎完全符合我的要求，并提供了许多漂亮的视觉效果和功能。我希望能够使用 Isotope 对表格行进行排序和过滤，并且我想出了一个似乎可行的基本演示。但是，存在一些错误:

• 我将 部分用于过滤器和行标题，因此我将 Isotope 选择器应用于 。但是，当 Isotope 以 tbody 作为容器进行初始化时，每行中的表格单元格将失去由表格格式分配的宽度。这不是什么大问题，因为我可以根据需要手动设置列宽，但在当前上下文中这很烦人。
• 行放置在表格之外，在表格容器元素的左上角。 tbody 元素上的相对定位似乎不会影响行的绝对位置样式规则(由 Isotope 自动应用)，因为它会影响普通的 div。通常，如果容器是使用绝对定位或相对定位定位的，那么绝对定位将是相对于其容器元素的，但此处似乎并非如此。

表格行被正确过滤，同位素库正确应用动画和样式，但有异常(exception)。如果可能的话，我想继续使用表格，因为维护此页面的人员将通过 CMS 进行维护，并且对 HTML 或 CMS 用于始终生成任何 HTML 的 WYSIWYG 编辑器知之甚少结构超出了一个相当基本的表。有没有人对解决这两个问题有任何建议？谢谢!

编辑:作为附录，我已经解决了最初遇到的问题。事实证明，tbody 元素不接受 position: relative 或 position: absolute 属性，因此表格行未正确放置。将整个表格设置为 position: relative 解决了主要的放置问题，尽管这些行随后被移动到了表格的左上角。我通过在 Javascript 中用 thead 元素的高度偏移表格行顶部属性来解决这个问题，因为没有 Javascript 显示是正常的。

这在 Firefox、Chrome、Opera 和 Safari 中运行良好。然而，IE 7、8 和 9 都有渲染问题——更糟糕的是，它们都是不同的渲染问题。 IE9 拒绝以正确的偏移量放置表格单元格，IE8 根本不显示行，IE7 似乎将整个情况解释为“爆炸!”。至少解决了我遇到的主要问题!

Answer 1

我已经整合了 Wesley 的风格建议来实现 Isortope——一个使用 Isotope 进行表格排序的 jQuery 插件。

它通过自动将表格生成的列宽转换为内联样式来解决列宽问题。这样，最终表格的显示方式与初始表格相同。

简单 demo here .

Download here .