jquery tablesorter - 使用图像和 div 提取文本

Question

我正在使用 jquery tablesorter，我想对内容进行排序。我的某些单元格包含图像，而其他单元格 div。

借助 textExtraction，我可以按图像或 div 对它们进行排序。我在 js 部分添加了两个函数：第一个用于图像，第二个用于 div。

如何同时使用它们？我想要一个函数来对图像 table 和 div.

进行排序

$(document).ready(function() {
            $("#tableA").tablesorter({
       sortList: [[0,0]],
       textExtraction:function(s1){ if($(s1).find('img').length == 0) return $(s1).text(); else return $(s1).find('img').attr('alt');}
       //textExtraction:function(s2){ if($(s2).find('div').length == 0) return $(s2).text(); else return $(s2).find('div').attr('class');}
      });  
     });

<html>
<head>
     <meta charset="utf-8"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script type="text/javascript" src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.min.js"></script>
      <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
     <table id="tableA" class="tablesorter" style="width:65%">
     <thead>
      <tr>
       <th align="center">Fromage</th>
       <th align="center">Lait</th>
       <th align="center">Pays</th>
       <th align="center">jan.</th>
       <th align="center">fév.</th>
       <th align="center">mar.</th>
       <th align="center">avr.</th>
       <th align="center">mai</th>
       <th align="center">juin</th>
       <th align="center">juil.</th>
       <th align="center">août</th>
       <th align="center">sep.</th>
       <th align="center">oct.</th>
       <th align="center">nov.</th>
       <th align="center">déc.</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td align="center">Abondance</td>
       <td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
       <td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
       <td><div class="square_empty"></div></td><!-- janvier -->
       <td><div class="square_empty"></div></td><!-- fevrier -->
       <td><div class="square_empty"></div></td><!-- mars -->
       <td><div class="square_empty"></div></td><!-- avril -->
       <td><div class="square_empty"></div></td><!-- mai -->
       <td><div class="square_full"></div></td><!-- juin -->
       <td><div class="square_full"></div></td><!-- juillet -->
       <td><div class="square_full"></div></td><!-- aout -->
       <td><div class="square_full"></div></td><!-- septembre -->
       <td><div class="square_full"></div></td><!-- octobre -->
       <td><div class="square_full"></div></td><!-- novembre -->
       <td><div class="square_full"></div></td><!-- decembre -->
      </tr>
      <tr>
       <td align="center">Banon</td>
       <td align="center"><img src="chevre.png" height="20" width="20" alt="chevre"></td>
       <td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
       <td><div class="square_full"></div></td><!-- janvier -->
       <td><div class="square_full"></div></td><!-- fevrier -->
       <td><div class="square_full"></div></td><!-- mars -->
       <td><div class="square_full"></div></td><!-- avril -->
       <td><div class="square_full"></div></td><!-- mai -->
       <td><div class="square_full"></div></td><!-- juin -->
       <td><div class="square_full"></div></td><!-- juillet -->
       <td><div class="square_full"></div></td><!-- aout -->
       <td><div class="square_full"></div></td><!-- septembre -->
       <td><div class="square_full"></div></td><!-- octobre -->
       <td><div class="square_full"></div></td><!-- novembre -->
       <td><div class="square_full"></div></td><!-- decembre -->
      </tr>
      <tr>
       <td align="center">Beaufort</td>
       <td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
       <td align="center"><img src="suisse.png" height="20" width="20" alt="suisse"></td>
       <td><div class="square_empty"></div></td><!-- janvier -->
       <td><div class="square_empty"></div></td><!-- fevrier -->
       <td><div class="square_empty"></div></td><!-- mars -->
       <td><div class="square_full"></div></td><!-- avril -->
       <td><div class="square_full"></div></td><!-- mai -->
       <td><div class="square_full"></div></td><!-- juin -->
       <td><div class="square_full"></div></td><!-- juillet -->
       <td><div class="square_full"></div></td><!-- aout -->
       <td><div class="square_full"></div></td><!-- septembre -->
       <td><div class="square_empty"></div></td><!-- octobre -->
       <td><div class="square_empty"></div></td><!-- novembre -->
       <td><div class="square_empty"></div></td><!-- decembre -->
      </tr>  
      <tr>
       <td align="center">Bleu d'Auvergne</td>
       <td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
       <td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
       <td><div class="square_empty"></div></td><!-- janvier -->
       <td><div class="square_empty"></div></td><!-- fevrier -->
       <td><div class="square_empty"></div></td><!-- mars -->
       <td><div class="square_empty"></div></td><!-- avril -->
       <td><div class="square_empty"></div></td><!-- mai -->
       <td><div class="square_full"></div></td><!-- juin -->
       <td><div class="square_full"></div></td><!-- juillet -->
       <td><div class="square_full"></div></td><!-- aout -->
       <td><div class="square_full"></div></td><!-- septembre -->
       <td><div class="square_full"></div></td><!-- octobre -->
       <td><div class="square_full"></div></td><!-- novembre -->
       <td><div class="square_full"></div></td><!-- decembre -->
      </tr>
      <tr>
       <td align="center">Bleu de Gex</td>
       <td align="center"><img src="vache.png" height="20" width="20" alt="vache"></td>
       <td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
       <td><div class="square_full"></div></td><!-- janvier -->
       <td><div class="square_full"></div></td><!-- fevrier -->
       <td><div class="square_empty"></div></td><!-- mars -->
       <td><div class="square_empty"></div></td><!-- avril -->
       <td><div class="square_empty"></div></td><!-- mai -->
       <td><div class="square_full"></div></td><!-- juin -->
       <td><div class="square_full"></div></td><!-- juillet -->
       <td><div class="square_full"></div></td><!-- aout -->
       <td><div class="square_full"></div></td><!-- septembre -->
       <td><div class="square_full"></div></td><!-- octobre -->
       <td><div class="square_full"></div></td><!-- novembre -->
       <td><div class="square_full"></div></td><!-- decembre -->
      </tr>      
      <tr>
       <td align="center">Chabichou du Poitou</td>
       <td align="center"><img src="chevre.png" height="20" width="20" alt="chevre"></td>
       <td align="center"><img src="france.png" height="20" width="20" alt="france"></td>
       <td><div class="square_empty"></div></td><!-- janvier -->
       <td><div class="square_empty"></div></td><!-- fevrier -->
       <td><div class="square_empty"></div></td><!-- mars -->
       <td><div class="square_empty"></div></td><!-- avril -->
       <td><div class="square_empty"></div></td><!-- mai -->
       <td><div class="square_full"></div></td><!-- juin -->
       <td><div class="square_full"></div></td><!-- juillet -->
       <td><div class="square_full"></div></td><!-- aout -->
       <td><div class="square_full"></div></td><!-- septembre -->
       <td><div class="square_full"></div></td><!-- octobre -->
       <td><div class="square_full"></div></td><!-- novembre -->
       <td><div class="square_empty"></div></td><!-- decembre -->
      </tr>           
     </tbody>
     </table>
    </body>
    </html>

Answer 1

Please try with this

$(document).ready(function() {
                $("#tableA").tablesorter({
                    sortList: [[0,0]],
                    textExtraction:function(s1){                    
                    if($(s1).children('div').html() === "") return $(s1).children('div').attr('class');else if($(s1).find('img').length == 0) return $(s1).text(); else return $(s1).find('img').attr('alt');}
                    //textExtraction:function(s2){ if($(s2).find('div').length == 0) return $(s2).text(); else return $(s2).find('div').attr('class');}
                });     
            });

演示 https://codepen.io/pixel-lab/pen/WgXRRV

jquery tablesorter - 使用图像和 div 提取文本

jquery tablesorter - text extraction with image and div

jquery

tablesorter