仅 Firefox 中的 jQuery 表排序器问题 - 显示隐藏行后标题行消失
当页面加载时,所有记录都会显示。排序效果很好,直到使用显示隐藏来过滤行,因此只有一些显示。然后标题行(带有用于排序的箭头)消失了。问题仅出现在 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>
When the page loads, all the records show. Sorting works great until show-hide is used to filter the rows so only some show. Then the header row--with the arrows for sorting--DISAPPEARS. The problem is only in Firefox. It works great in IE7 and IE8.
I'm using jQuery 1.4.2 from Google.
Code for show-hide
$(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();
});
});
Here is the 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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不认为这只是 Firefox 的问题,因为标题行首先被隐藏,代码 deosn 稍后不会显示它。
尝试按如下方式更改代码:
Javascript:
HTML:
I don't think this is just an issue for firefox because the header row is first made to hide and the code deosn't show it up later.
Try changing the code as follows:
Javascript:
HTML: