不处理图像的Jquery表排序

Question

我有一张桌子被php回音，

<table class="sortable">
    <thead>
        <tr>
            <th>Player Name</th>
            <th>Level</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Krack</td>
            <td id="7" class="level">7</td>
        </tr>
        <tr>
            <td>Lively</td>
            <td id="6" class="level">6</td>
        </tr>
        <tr>
            <td>Bamon Williams</td>
            <td id="6" class="level">6</td>
        </tr>
        <tr>
            <td>Sinister Char</td>
            <td id="5" class="level">5</td>
        </tr>
        <tr>
            <td>Senior BoomBox</td>
            <td id="5" class="level">5</td>
        </tr>
        <tr>
            <td>Blitzking</td>
            <td id="4" class="level">4</td>
        </tr>
        <tr>
            <td>Hadooooken</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>Jumpman2392</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>ALEC*</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>Frokido</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>B. McOxbig</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>[MES] Koko</td>
            <td id="1" class="level">1</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

然后，<td id="1" class="level">1</td>被一些javascript更改为有图像代替'1‘。

当用户单击th、Pplayer名称或级别之一时，它将按降序或升序对该列进行排序，但问题是，当级别列由图像组成时，它将对图像进行排序，使图像混乱，它们将不按正确的顺序排列(即，1,2,3,4,5,6,7，类似于5,6,2,7,3,1,4) JQuery函数可以处理整数和普通字符串，但我不知道它如何排序或处理图像标记。

javascript库的链接是这里。

Answer 1

我对最后一个问题的答案做了一个新的版本，其中包括一个解决这个新问题的解决方案，可以在：https://jsfiddle.net/mdbdj895/1/上找到

这导致包含图片的<td>元素获得一个具有适当值的sorttable_customkey属性(基于<td>的id属性)，因为您使用的库似乎需要该属性。

现在的结果是，不仅在具有基于父<td>的id属性的src的src元素中创建图像，而且<td>本身获得了具有正确值的新属性，如下所示：

<tr>
    <td>Krack</td>
    <td id="7" class="level" sorttable_customkey="7">
      <img src="../img/CL7.png" alt="7">
    </td>
</tr>

Answer 2

我看了一下那个图书馆，看来你得用自定义键

是这样的：

<td id="1" class="level" sorttable_customkey="1">1</td>
<td id="2" class="level" sorttable_customkey="2">2</td>
<td id="3" class="level" sorttable_customkey="3">3</td>
.................. And so on