仅 Firefox 中的 jQuery tablesorter 问题 - 显示隐藏行后标题行消失

Question

当页面加载时，所有记录都会显示。在使用 show-hide 过滤行之前排序效果很好，因此只有一些显示。然后标题行 - 带有用于排序的箭头 - 消失。问题仅在 Firefox 中。它在 IE7 和 IE8 中运行良好。

我正在使用来自 Google 的 jQuery 1.4.2。

显示隐藏代码

$(document).ready(function() {
    // show all the rows
    $("#org_status tr").show();

    //find selected filter
    $("#filter_status a").click(function(evt) {
        evt.preventDefault();
        $("#org_status tr").hide();
        var id = $(this).attr('id');

        $("." + id).show();
    });
});

这是 HTML：

<!-- show-hide "buttons" -->
<p id='filter_status'>Filter by status: 
    <a href='#' id='All'>All</a> 
    <a href='#' id='Active'>Active</a> 
    <a href='#' id='Inactive'>Inactive</a> 
    <a href='#' id='Pending'>Pending</a>
</p>

<!-- table to sort ->
<table id='org_status' class='info_table tablesorter'>
  <thead>
    <tr>
      <th class='org-name-col'>Name</th>
      <th class='org-status-col'>Status</th>
    </tr>
  </thead>
  <tbody>
<tr class='All Active'>
  <td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
  <td>Active</td>";
</tr>
<tr class='All Inactive'>
  <td><a href='admin/org_edit.php?org=22'>Bar</a></td>
  <td>Active</td>";
</tr>
<tr class='All Pending'>
  <td><a href='admin/org_edit.php?org=11'>
      Bar Foo Very Long Org Name Goes Here</a></td>
  <td>Active</td>";
</tr>
  </tbody>  
</table>    

Answer 1

我不认为这只是 firefox 的问题，因为标题行首先被隐藏，而代码稍后不会显示它。 尝试按如下方式更改代码： Javascript：

$(document).ready(function() {
    // show all the rows
    $("#org_status tr").show();

    //find selected filter
    $("#filter_status a").click(function(evt) {
        evt.preventDefault();
        $("#org_status tr").hide();
        var id = $(this).attr('id');

        $("." + id).show();
    $(".showAlways").show();
    });
});

HTML：

<p id='filter_status'>Filter by status: 
    <a href='#' id='All'>All</a> 
    <a href='#' id='Active'>Active</a> 
    <a href='#' id='Inactive'>Inactive</a> 
    <a href='#' id='Pending'>Pending</a>
</p>

<table id='org_status' class='info_table tablesorter'>
  <thead>
    <tr  class="showAlways">
      <th class='org-name-col'>Name</th>
      <th class='org-status-col'>Status</th>
    </tr>
  </thead>
  <tbody>
<tr class='All Active'>
  <td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
  <td>Active</td>";
</tr>
<tr class='All Inactive'>
  <td><a href='admin/org_edit.php?org=22'>Bar</a></td>
  <td>Active</td>";
</tr>
<tr class='All Pending'>
  <td><a href='admin/org_edit.php?org=11'>
      Bar Foo Very Long Org Name Goes Here</a></td>
  <td>Active</td>";
</tr>
  </tbody>  
</table>