Javascript 用于切换sql结果的Jquery按钮

我在数据库中有一个表（myTable），如下所示

**Color**          **State**           **Fruit**
  Red                Idaho               Plum
  Blue               Kentucky            Orange
  Yellow             Florida             Cherry
  Green              Hawaii              Apple
  Red                Michigan            grape
  Blue               Alabama             Bannana
  Red                Nevada              Apple

我在HTML页面上有JQuery按钮，如果单击按钮，它将切换显示上述信息的表

<button type="button" class="btn btn-primary" id="button" value="Toggle table">Red Colors</button>
<button type="button" class="btn btn-primary">Blue Colors</button>
<button type="button" class="btn btn-primary">Yellow Colors</button>
<button type="button" class="btn btn-primary">Orange Colors</button>
<button type="button" class="btn btn-primary">Green Colors</button>
<div class="container">
<table class="table" id="table">
  <thead>
    <tr>
    <th>Color</th>
    <th>State</th>
    <th>Fruit</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Kentucky</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Yellow</td>
    <td>Florida</td>
    <td>Cherry</td>
  </tr>
  <tr>
    <td>Green</td>
    <td>Hawaii</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Michigan</td>
    <td>grape</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Alabama</td>
    <td>Bannana</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Nevada</td>
    <td>Apple</td>
  </tr>
</tbody>
</table>
</div>

剧本

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").toggle();
    });
});

我想做的是，我点击红色按钮，一个表格将只显示第一列中带有红色的条目。单击蓝色按钮，表格仅显示颜色列中带有蓝色的项目

我知道sql会像这样运行

SELECT * FROM myTable WHERE color =""

---

以防桌子不是很大。您可能总是从服务器获取所有行，然后在前端对其进行筛选。例如，向每个

tr

添加标记类，而不是隐藏/显示它

<table>
  ...
  <tr class='my-red'>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  ...
</table>
<button class='toggle-red'>Toggle Red</button>

HTML:

---

工作小提琴：

我在这里创建了一个小提琴，它将根据所选按钮的颜色翻转桌子。 到目前为止，它只在前两个按钮上工作。 其余的也可以类似地联合起来

这是你的电话号码

代码在以下位置更改：

$（“#btn_Blue”）。单击（函数（）{

相反，如果使用sql在jquery中获取表数据，则可以遵循以下步骤：

用sql数据替换脚本中的

color

---

下面是支持的问题：

您能否共享将从sql表中获取数据的后端？是否要为您编写代码？您在服务器端做了什么？

<table>
  ...
  <tr class='my-red'>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  ...
</table>
<button class='toggle-red'>Toggle Red</button>

var redIsOn = true;  
function toggleRed(){
  redIsOn = !redIsOn; 
  $(".my-red").css('display',redIsOn?'block':'none');
}

$(document).ready(function(){
  $(".toggle-red").on('click',toggleRed);
});

<button type="button" class="btn btn-primary" id="red" value="Toggle table">Red Colors</button>
<button type="button" class="btn btn-primary" id="blue">Blue Colors</button>
<div class="container">
<table class="table" id="table">
  <thead>
    <tr>
    <th>Color</th>
    <th>State</th>
    <th>Fruit</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Kentucky</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Yellow</td>
    <td>Florida</td>
    <td>Cherry</td>
  </tr>
  <tr>
    <td>Green</td>
    <td>Hawaii</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Michigan</td>
    <td>grape</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Alabama</td>
    <td>Bannana</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Nevada</td>
    <td>Apple</td>
  </tr>
</tbody>
</table>
</div>

$(document).ready(function()
{
    $("#red").click(function()
    {
     $('tbody tr:not(:contains("Red"))').not().toggle();   
    });

     $("#blue").click(function()
    {
       $('tbody tr:not(:contains("Blue"))').not().toggle();   
    });
});