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

最も簡単な方法は、非表示のコンテンツを画像セルに追加することです ( demo )。

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

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

また、英数字の並べ替えを行っているように見えるので、私のfork of 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 に答える