jQuery 表排序器 : custom html image tag sorter/parser

Question

我正在使用jQuery tablesorter plugin 。它似乎工作正常，只是它无法对以图像标签作为内容的行进行排序。我想实现一些仅按图像标签的 src 属性排序的东西。我尝试了很多方法，但似乎无法让它发挥作用。

问题:

• 该插件不会使用图像解析器检测我的图像列，而是将其检测为使用 digit解析器，所以我必须手动指定图像解析器。
• s参数被传递给format我的解析器的函数似乎是空白/空/未定义(类似的东西，我不能告诉)。

代码:

JavaScript:

$.tablesorter.addParser({ 
    id: 'image', 
    is: function(s) {
        //i think this works
        return /^<img(.*)>$/.test(s);
    }, 
    format: function(s) { 
        //neither of these work
        return $(s).attr('src').toLowerCase();
        return s.match(/src="(.*)"/);
    },
    type: 'text' 
}); 
$(document).ready(function() { 
    $("table").tablesorter(); 
}); 

HTML:

<table>             
    <thead> 
        <tr> 
            <th>text column</th> 
            <th class="{sorter: 'image'}">image column</th>  
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>a</td> 
            <td><img src="d.gif"></td> 
        </tr> 
        <tr> 
            <td>b</td> 
            <td><img src="c.gif"></td> 
        </tr> 
        <tr> 
            <td>c</td> 
            <td><img src="b.gif"></td> 
        </tr> 
        <tr> 
            <td>d</td> 
            <td><img src="a.gif"></td> 
        </tr> 
    </tbody>
</table>

Answer 1

给定标记的一种方法是废弃自定义解析器并执行以下操作。

$("table").tablesorter({
     textExtraction:function(s){
        var $el = $(s),
        $img = $el.find('img');
        return $img.length ? $img[0].src : $el.text();
     }  
});