jQuery tablesorter - 当标题项包含子表时如何使用stickyHeaders？答案

【问题标题】：jQuery tablesorter - How to use stickyHeaders when the header items contain child tables?jQuery tablesorter - 当标题项包含子表时如何使用stickyHeaders？
【发布时间】：2018-02-14 17:30:19
【问题描述】：

对于 jQuery tablesorter 2.0 (https://mottie.github.io/tablesorter/docs/)，当表格标题行包含子表格时，当您开始使用stickyHeaders 滚动时，标题值会消失。

使用stickyHeaders 演示（https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html），“名字”的标题已更改为拥有自己的表格：

<div class="narrow-block wrapper">
<table id="table2" class="tablesorter">
    <caption class="dark-row">Student Grades</caption>
    <thead>
        <tr><th>Account #</th><th><table><tr><td>First Name</td></tr></table></th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
    </thead>
    <tbody>
        <tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
        <tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
        <tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
        <tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
        <tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
        <tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
        <tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
        <tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
        <tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
        <tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
        <tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
        <tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
        <tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
        <tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
        <tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
    </tbody>
</table>
</div>

使用stickyHeaders 向下滚动时，列标题“First Name”会被清除。

感谢您的帮助！

【问题讨论】：

tableSorter 一直对奇怪的表结构非常不宽容。 Mottie 的 fork 比原来的要好得多，但仍然依赖于简单的 <table><thead>...<thead><tbody>...</tbody></table>。简单的答案是避免嵌套表。

标签： jquery tablesorter

【解决方案1】：

stickyHeaders 小部件隐藏了额外的 theads 并从克隆的粘性标头表中删除了 tbodys。我已经调整了代码以允许嵌套表，但该更改目前仅在 master 分支中可用 (demo)。一旦修复了一些其他错误，新版本将很快推出。

<thead>
  <tr>
    <th>
      <table>
        <thead>
          <tr>
            <th>test</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>test</td>
          </tr>
        </tbody>
      </table>
    </th>
    <th>...</th>
  </tr>
</thead>

【讨论】：