Javascript更改表格内容点击

Question

我有一个表格，其中的信息根据点击按钮而改变。目前它的工作原理是当我使用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(); 
}); 

如上所述，切换工作，但多个按钮可以一次切换，导致表中显示不良数据。有没有办法限制一个按钮被切换？如果不是show（）命令在单击时不起作用。

Answer 1

添加hide()filter()之前，所以你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(); 
});