Javascript在单击时更改表内容

我有一个表，其中的信息根据按钮单击的内容而变化。目前，当我使用toggle（）命令时，它可以工作，但使用toggle（）命令会同时选择多个按钮，从而导致显示错误的数据。我尝试了.show（）方法，但它不起作用。有没有一种方法，我可以强制一次只切换一个按钮，或者删除切换，一次只显示一个按钮

<button type="button" class="btn btn-primary" id="one" value="Toggle table">Example 1</button>
<button type="button" class="btn btn-primary" id="two">Example 2</button>
<button type="button" class="btn btn-primary" id="three">Example 3</button>
<button type="button" class="btn btn-primary" id="four">Example 4</button>
<button type="button" class="btn btn-primary" id="five">Example 5</button>
<button type="button" class="btn btn-primary" id="six">Example 6</button>
<button type="button" class="btn btn-primary" id="seven">Example 7</button>

<!--Table code -->
<div class="tab-content">
<table class="table table-condensed" id="table">
<!--Table code -->
</table>
</div>

<!-- Javascript -->
$(document).ready(function()
{
$("#one").click(function()


{
    var $day1 = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "0"
}).show();
});

 $("#two").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "1"
}).show();
});


$("#three").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "2"
}).show();
});

$("#four").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "3"
}).toggle();
});

$("#five").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "4"
}).toggle();
});

示例1
例2
例3
例4
例5
例6
例7
$（文档）.ready（函数（）
{
$（“#一”）。单击（函数（）
{
var$day1=$（“#table tbody tr”）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！=“0”
}).show（）；
});
$（“#2”）。在（“单击”，函数（）上）
{
var$rowsNo=$（“#table tbody tr”）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！=“1”
}).show（）；
});
$（“#三”）。在（“单击”，函数（）
{
var$rowsNo=$（“#table tbody tr”）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！=“2”
}).show（）；
});
$（“#四”）。在（“单击”，函数（）
{
var$rowsNo=$（“#table tbody tr”）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！=“3”
}).toggle（）；
});
$（“#五”）。在（“单击”，函数（）
{
var$rowsNo=$（“#table tbody tr”）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！=“4”
}).toggle（）；
});

如上所述，切换可以工作，但可以同时切换多个按钮，从而导致表中显示的数据不正确。是否有办法限制切换一个按钮？如果没有，则单击时show（）命令不起作用。

在

过滤器（）之前添加
隐藏（）
，这样您的
显示（）
只显示所需内容

$("#one").click(function() {
   $("#table tbody tr").hide().filter(function() {
    return $.trim($(this).find("td").eq(0).text()) !== "0"
  }).show();
});

您还可以通过为过滤器值添加公共类和数据属性来简化所有按钮的设置

<button  class="btn btn-primary filter-btn" data-filter="1">Example 2</button>

$(".filter-btn").click(function() {
   var filterVal = $(this).attr('data-filter');
   $("#table tbody tr").hide().filter(function() {
    return $.trim($(this).find("td").eq(0).text()) !== filterVal ;
  }).show();
});

示例2
$（“.filter btn”）。单击（函数（）{
var filterVal=$（this.attr（'data-filter'）；
$（“#table tbody tr”）.hide（）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！==filterVal；
}).show（）；
});
在
filter（）
之前添加
hide（）
，这样您的
show（）
只显示所需内容

$("#one").click(function() {
   $("#table tbody tr").hide().filter(function() {
    return $.trim($(this).find("td").eq(0).text()) !== "0"
  }).show();
});

您还可以通过为过滤器值添加公共类和数据属性来简化所有按钮的设置

<button  class="btn btn-primary filter-btn" data-filter="1">Example 2</button>

$(".filter-btn").click(function() {
   var filterVal = $(this).attr('data-filter');
   $("#table tbody tr").hide().filter(function() {
    return $.trim($(this).find("td").eq(0).text()) !== filterVal ;
  }).show();
});

示例2
$（“.filter btn”）。单击（函数（）{
var filterVal=$（this.attr（'data-filter'）；
$（“#table tbody tr”）.hide（）.filter（函数（）{
返回$.trim（$（this.find（“td”）.eq（0.text（））！==filterVal；
}).show（）；
});