如何修复可排序javascript中的第二行？

Question

下面是sorttable.js：https://kryogenix.org/code/browser/sorttable/和用法，如下：

<script type="text/javascript" src="https://kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" border="1">
    <tr>
        <th>Str</th>
        <th>Int</th>
    </tr>
    <tr>
        <td>a</td>
        <td>1</td>
    </tr>
    <tr>
        <td>b</td>
        <td>2</td>
    </tr>
</table>

​

现在我想在第一行下面创建一个过滤器：

<script type="text/javascript" src="https://kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" border="1">
    <tr>
        <th>Str</th>
        <th>Int</th>
    </tr>
    <tr>
        <th>filter
        <select>
        <option>a</option>
        <option>b</option>
        </select>
        </th>
    </tr>
    <tr>
        <td>a</td>
        <td>1</td>
    </tr>
    <tr>
        <td>b</td>
        <td>2</td>
    </tr>
</table>

​

但是它会排序，我怎么才能编辑这个sorttable.js并修复第二行呢？(我的sorttable.js保存在本地文件中)非常感谢！

Answer 1

在<table class="sortable">中，您只需删除class="sortable"，sortable.js将不会在第二行中工作

Answer 2

也许这是可行的，将过滤器部分移入<thead>

​

<script type="text/javascript" src="https://kryogenix.org/code/browser/sorttable/sorttable.js"></script>
    <table class="sortable" border="1">
<thead>
    <tr>
        <th>Person</th>
        <th>Monthly pay</th>
    </tr>
</thead>
<thead>
    <tr>
        <th>filter
        <select>
        <option>a</option>
        <option>b</option>
        </select>
        </th>
    </tr>
</thead>
<tbody>
    <tr><td>Jan Molby</td><td>£12,000</td></tr>
    <tr><td>Steve Nicol</td><td>£8,500</td></tr>
    <tr><td>Steve McMahon</td><td>£9,200</td></tr>
    <tr><td>John Barnes</td><td>£15,300</td></tr>
</tbody>
<tfoot>
    <tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>

​