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

我正在尝试对表列进行排序，无论它是否包含

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>

一二三
文本1
文本2
文本4
文本5
文本22
案文111

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

我正在使用这个插件：

---

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

$（函数（）{
$（'table img'）。每个（函数（）{
$（本）。在（'1'）之后；
});
$（'table'）.tablesorter（）；
});

---

另外，因为看起来您正在进行字母数字排序，所以您可能想试试我的。它将在“文本4”之后正确排序“文本22”。

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

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

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

---

（*）这个答案要归功于

DataTables插件可能是一个很好的解决方案。它有很多很好的特性，开箱即用，还有一个定制的排序插件---@Batfan谢谢，我现在没有选择新插件的奢侈，我只需要让它工作&在干净快速的jquery中，它将变成$（“table”）.tablesorter（）.find（“img”）。之后('111@mikakun使用事件预结束/删除元素的唯一问题是，如果表很大。那么每个单元格都会得到DOM操作，从而使排序速度慢得多。老实说，我认为最好的解决方案是只解析img单元格数据，但同样，您不能用原始版本的tablesorter来完成。在我的tablesorter分支中，您可以从解析器中访问单元格内容-请参阅format函数：

format:function（s，table，cell，cellIndex）

（），这不是问题，因为我们讨论的是网页上的表；大表的问题是“为什么要在网页中追加大表？”javascript是用来处理海量数据和用户交互的，并且只将需要显示的内容附加到dom中

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

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

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