jQuery tablesorter：自定义 html 图像标签排序器/解析器

Question

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

问题：

• 插件没有使用图像解析器检测我的图像列，它检测到它使用digit 解析器，所以我必须手动指定图像解析器。
• 传递给我的解析器的 format 函数的 s 参数似乎是空白/空/未定义（类似的东西，我不知道）。

代码：

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();
     }  
});

Answer 2

问题涉及tablesorter 在应该使用innerText 时使用innerHTML： jquery tablesorter custom parser - innerHTML vs. innerText