Jquery表排序不使用图像

时间:2016-03-12 13:11:43

标签: javascript php jquery html

我有一张桌子正在被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>

然后某些javascript正在更改<td id="1" class="level">1</td>以使图像代替“1”。

当用户点击其中一个Pplayer Name或Level时,它会按降序或升序对该列进行排序,但是当我按照图像组成时对Level列进行排序时,它会被捕获。混淆图像,它们将不是正确的顺序(即1,2,3,4,5,6,7更像5,6,2,7,3,1,4)JQuery函数适用于整数和正常的字符串,但我不知道它如何分类或处理图像标签

javascript库的链接是here

2 个答案:

答案 0 :(得分:1)

我已经提出了最后一个问题的答案的新版本,其中包含针对此新问题的解决方案:https://jsfiddle.net/mdbdj895/1/

这会导致包含图片的<td>元素获得具有适当值的sorttable_customkey属性(基于<td>的{​​{1}}属性),因为库是你的正在使用似乎需要该属性。

现在的结果是,不仅在具有基于父id的id属性的<td>的{​​{1}}元素中创建图像,但是src本身会获得具有正确值的新属性,如下所示:

<td>

答案 1 :(得分:0)

我查看了该库,看来你必须使用custom keys

就是这样:

<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