Question

我正在使用tablesorter插件。过滤器小部件在单个表上运行良好。现在我正在尝试用tablesorter做两件事。

我试图根据下拉列表的值隐藏整个表格。我得到了一个包含以下代码的解决方案，但我想知道在tablesorter中是否有更好的方法：

$("#search_league").change(function () {
    $("table").show();
    $("table").each(function(){
        if($("#search_league").val() != $(this).attr('id')){
            $(this).hide();
        };
    });
});

第二个我发现更难。我试图隐藏所有不包含某个值的表我使用下拉列表来选择值。应隐藏所有不包含该值的表。

这些表是由mysql查询和php创建的。这些是表头。

    echo "<table class='tablesorter' id='".$lid."' style='width:80%'>
<thead>
<tr>            
        <th colspan='2'><a href='league.php?lid=".$lid."'>".$getlid['LEA']."</a></th>
        <th class='num_caption' title='Spiele'>Sp</th>
        <th class='num_caption'  title='Siege'>S</th>
        <th class='num_caption'  title='Niederlagen'>N</th>
        <th class='num_caption'  title='Wertungspunkte'>WP</th>
        <th class='num_caption'  colspan='2' title='Korbpunkte'>Punkte</th>         
        <th class='num_caption'  title='Differenz Korbpunkte'>Dif</th>                          
        <th class='num_caption'  title='Spiele verloren mit Spielwertung'>Wert</th>     
        <th style='display:none';>Team</th>
    </tr>
</thead>";

我试图像＃1那样解决问题，但这似乎不是正确的方法。有什么想法吗？

Answer 1

对于Q1，你的答案看起来很棒。但是，MDJ有一个好点 - 结果相同，工作量减少。

问题二：

使用.each(className)循环遍历表格，并使用.filter()返回给定表格是否包含表格单元格中任何位置所需的文本。

这是一个简单的工作示例：

的 jsFiddle Demo slight improvement - colorize bg

<强> HTML：

Hide all tables NOT containing: <select id="mysel"> <option value="go">Choose One:</option> <option value="car">car</option> <option value="bus">bus</option> <option value="apple">apple</option> <option value="joy">joy</option> <option value="all">show all</option> </select> <table class='tablesorter' id='id_a'> <thead> <tr> <th class="aa"><a href='league.php?lid=17'>HREF</a> </th> <th class='num_caption' title='Spiele'>Sp</th> <th class='num_caption' title='Siege'>S</th> <th class="bb">Team</th> </tr> <tr><td class="aa">HREF</td><td>car</td><td>bus</td><td class="bb">aa1</td></tr> <tr><td class="aa">HREF</td><td>car</td><td>bus</td><td class="bb">aa2</td></tr> <tr><td class="aa">HREF</td><td>car</td><td>bus</td><td class="bb">aa3</td></tr> </thead> </table> <table class='tablesorter' id='id_b'> <thead> <tr> <th class="aa"><a href='league.php?lid=17'>HREF</a> </th> <th class='num_caption' title='Spiele'>Sp</th> <th class='num_caption' title='Siege'>S</th> <th class="bb">Team</th> </tr> <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">bb1</td></tr> <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">bb2</td></tr> <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">bb3</td></tr> </thead> </table> <table class='tablesorter' id='id_c'> <thead> <tr> <th class="aa"><a href='league.php?lid=17'>HREF</a> </th> <th class='num_caption' title='Spiele'>Sp</th> <th class='num_caption' title='Siege'>S</th> <th class="bb">Team</th> </tr> <tr><td class="aa">HREF</td><td>bus</td><td>apple</td><td class="bb">cc1</td></tr> <tr><td class="aa">HREF</td><td>bus</td><td>apple</td><td class="bb">cc2</td></tr> <tr><td class="aa">HREF</td><td>joy</td><td>joy</td><td class="bb">cc3</td></tr> </thead> </table> <table class='tablesorter' id='id_d'> <thead> <tr> <th class="aa"><a href='league.php?lid=17'>HREF</a> </th> <th class='num_caption' title='Spiele'>Sp</th> <th class='num_caption' title='Siege'>S</th> <th class="bb">Team</th> </tr> <tr><td class="aa">HREF</td><td>car</td><td>car</td><td class="bb">a1</td></tr> <tr><td class="aa">HREF</td><td>bus</td><td>bus</td><td class="bb">a2</td></tr> <tr><td class="aa">HREF</td><td>apple</td><td>joy</td><td class="bb">a3</td></tr> </thead> </table>

<强>的jQuery / JS：

$('#mysel').change(function(){ var i = this.value; if (i=='go') return false; if (i=='all') {$('.tablesorter').show();$('#mysel').val('go');return false;} $('.tablesorter').each(function(){ var tid = this.id; var xxx = hasitem(tid, i); //alert(xxx[0]); if (typeof xxx[0] == 'undefined') { $('#'+tid).hide(); }else{ $('#'+tid).show(); } }); }); function hasitem(tbl, item){ //alert('Table = ' +tbl+ ' Item = ' +item); var tableRow = $("#"+tbl+ " td").filter(function() { return $(this).text() == item; }).closest("tr"); return tableRow; }

CSS（漂亮）：

table {border:1px solid grey;border-collapse:collapse;width:200px;} table {margin:20px;} th, td {border:1px solid grey;} th, td {width:20px;text-align:center;} .aa {width:50px;} .bb {display:none;} #id_a{background:wheat;} #id_b{background:lavender;} #id_c{background:paleyellow;} #id_d{background:palegreen;}

Answer 2

试试这个

$("#search_league").change(function () {
    $("table").hide();
    var tablesToShow=$("#search_league").val();
    $("#"+tablesToShow).show();

});

}）;

基本上与没有for循环的尝试相反。

tablesorter - 根据下拉选择隐藏多个表

2 个答案: