Question

我正在尝试对表列进行排序，无论它是否包含img。所以我的表格html看起来像这样：

<table>
<thead>
<th>One</th><th>Two</th><th>Three</th>
</thead>
<tbody>
<tr>
<td><span class="raw"><img src="path/to/image.png" /></span></td>
<td><span class="raw">text 1</span></td>
<td><span class="raw">text 2</span></td>
</tr>
<tr>
<td><span class="raw"></span></td>
<td><span class="raw">text 4</span></td>
<td><span class="raw">text 5</span></td>
</tr>
<tr>
<td><span class="raw"><img src="path/to/image.png" /></span></td>
<td><span class="raw">text 22</span></td>
<td><span class="raw">text 111</span></td>
</tr>
</tbody>
</table>

我如何对表结构进行排序？对于排序的最终结果，在顶部或底部具有图像的列，反之亦然

我正在使用这个插件：

http://tablesorter.com/docs/

Answer 1

Tablesorter是一个很棒的插件 - 您可以通过“alt”文本对图像进行排序，方法是定义您自己的文本提取功能，如下所示：

$("#table_id").tablesorter({
    textExtraction:function(s){
        if($(s).find('img').length == 0) return $(s).text();
        return $(s).find('img').attr('alt');
    }
});

不包含图像的单元格将按文本排序。

（*）感谢jQuery forum获得此答案

Answer 2

最简单的方法是向图像单元格添加隐藏内容（demo）：

$(function () {
  $('table img').each(function () {
    $(this).after('<span style="display:none">1</span>');
  });

  $('table').tablesorter();
});

此外，由于您看起来正在进行字母数字排序，因此您可能想尝试我的fork of tablesorter。它将在“文本4”之后正确排序“文本22”。

Answer 3

$("table").tablesorter().on("sortStart",function() { 
                  //prepend a sortable string before the image
            }).on("sortEnd",function() { 
                  //remove added string
         });

如何使用图像jquery tablesorter对表进行排序

3 个答案: