我有一个包含一些事件的表，可见的行有一个new类，所有过去的事件都隐藏着`：not＆＃39;功能
我想创建一个具有onClick功能的按钮，该功能可让用户查看过去没有new课程的事件。
$(document).ready(function() {
$('tbody tr:not(.new)').hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<tbody>
<table style="width:100%" cellpadding="8px">
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
</table>
</tbody>
</html>
答案 0 :(得分：1)
看起来非常微不足道，那是你所期待的吗？
$(document).ready(function() {
$('tbody tr:not(.new)').hide();
});
$('#btn').click(function(){
$('tbody tr').show();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<tbody>
<table style="width:100%" cellpadding="8px">
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
</table>
</tbody>
<button id='btn'>click</button>
</html>
答案 1 :(得分：1)
假设你想要用旧事件替换新事件，最好的方法是在点击按钮时显示所有元素，然后隐藏new元素。
$(document).ready(function() {
$('tbody tr:not(.new)').hide();
});
function showOld() {
$('tbody tr').show();
$('tbody tr.new').hide();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showOld()">Show Old Events</button>
<tbody>
<table style="width:100%" cellpadding="8px">
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
</table>
</tbody>
要显示除旧元素之外的新元素，只需删除：
$('tbody tr.new').hide();
希望这有帮助！ ：）
答案 2 :(得分：1)
我刚开始意识到你最初在做什么，并添加了一个按钮来激活它。
$(document).ready(function() {
$('tbody tr:not(.new)').hide();
$('button').click( function() {
$('tbody tr:not(.new)').show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<tbody>
<table style="width:100%" cellpadding="8px">
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
</table>
</tbody>
<button>Show Old Events</button>
</html>
答案 3 :(得分：0)
只需添加按钮，然后单击显示所有行，然后更改按钮文本。
$(document).ready(function() {
$('tbody tr:not(.new)').hide();
$('#show_past_event').click(function(){
if($(this).hasClass("all_events"))
{
$('tbody tr:not(.new)').hide();
$(this).text("Show Past Event");
$('#show_past_event').removeClass("all_events");
}
else
{
$('tbody tr').show();
$(this).text("Hide Past Event");
$('#show_past_event').addClass("all_events");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<html>
<tbody>
<button id="show_past_event">Show Past Event</button>
<table style="width:100%" cellpadding="8px">
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr>
<td>old event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
<tr class="new">
<td>new event</td>
</tr>
</table>
</tbody>
</html>