5

我正在尝试对表列进行排序，无论它是否包含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/

4

3 回答 3

11

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

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

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

（*）感谢jQuery 论坛的这个答案

于 2013-03-05T17:24:14.020 回答
3

最简单的做法是将隐藏内容添加到图像单元格（演示）：

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

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

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

于 2013-01-10T20:01:38.237 回答
0 
$("table").tablesorter().on("sortStart",function() { 
                  //prepend a sortable string before the image
            }).on("sortEnd",function() { 
                  //remove added string
         });
于 2013-01-10T17:22:09.170 回答