使用 jQuery 动画 HTML“排名”表

Question

我想使用此处的 jQuery 插件创建动画 HTML 排名表：http://www.scottlogic.co.uk/2011/01/animating-html-ranking-tables-with-javascript/

我正在使用 Visual Studio 2010。我创建了一个新的 C# 网站，将以下 jQuery 文件保存在“Scripts/”中：

• animator.js
• jquery-1.4.3.js
• rankingTableUpdate.js

我的样式表位于此处：“App_Themes/Main Theme/Styles/Site.css”

我使用的是 Site.master 母版页。我已将以下代码粘贴到“Default.aspx”中：

    <br />
      <table border="1" cellpadding="2" cellspacing="2" width="40%">
        <tr>
        <th>Researcher</th>
        <th>Close Ratio</th>
          </tr>
          <tr>
          <td><strong>John</strong> Doe</td>
          <td><strong>1</strong> in <strong>25</strong> CONV</td>
          </tr>
          <tr>
          <td><strong>John</strong> Zert</td>
          <td><strong>1</strong> in <strong>51</strong> CONV</td>
          </tr>
          <tr>
          <td><strong>Johnny</strong> Halliday</td>
          <td><strong>1</strong> in <strong>37</strong> CONV</td>
          </tr>
          <tr>
          <td><strong>Johnathan</strong> Bell</td>
          <td><strong>1</strong> in <strong>31</strong> CONV</td>
          </table> 

我想了解如何将此表连接到 JavaScript 并使其运行。

是否需要参考上表中的“更新”和“常量”列？如果是，我在哪里可以找到资源来做到这一点？

请帮忙！

Answer 1

在该页面的usage 部分有一些关于如何使用插件的文档。

查看您的代码，您的 html 似乎存在一些问题。该插件要求您有一个明确定义了 thead 的表，这是您 th 元素应该去的地方.在用法部分有一个预期的表结构示例。

此外，该插件的工作原理是采用两个表格元素，然后使一个动画到另一个 - 目前您只有一个表格，因此没有任何动画。如果您想使用它来显示表格排序的动画，请查看页面中的code for the financial example。这通过创建一个新的表格副本来工作，当用户单击列标题时，它的行按排序顺序排列，然后将当前表格动画化到这个新表格。

顺便说一句，我是这个插件的作者，我实际上并没有维护代码，所以如果它由于浏览器更改而无法工作，那么我担心你可能需要修复它自己，或找别人！