jQuery tablesorter：自定义html图像标记分类器/解析器

Question

我正在使用jQuery tablesorter plugin。它似乎工作正常，除了它不能将带有图像标记的行作为其内容进行排序。我想实现一些只能通过image标签的src属性进行排序的东西。我尝试过很多东西，但似乎无法让它发挥作用。

问题：

• 插件没有使用图像解析器检测我的图像列，它使用digit解析器检测到它，因此我必须手动指定图像解析器。
• 传递给我的解析器的s函数的format参数似乎是空白/ null / undefined（类似的东西，我无法分辨）。

代码：

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在使用innerHTxt时使用innerHTML： jquery tablesorter custom parser - innerHTML vs. innerText