用于切换 sql 结果的 Jquery 按钮答案

【问题标题】：Jquery Button to toggle sql results用于切换 sql 结果的 Jquery 按钮
【发布时间】：2017-12-02 16:46:44
【问题描述】：

我在数据库（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>

CSS

#table{
    display: none;
}

脚本

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

我想要发生的是我单击红色按钮，然后会显示一个表格，其中仅显示第一列中带有红色的条目。单击蓝色按钮，该表仅在颜色列中显示带有蓝色的项目。

我知道 sql 会变成这样

SELECT * FROM myTable WHERE color =""

【问题讨论】：

你能分享一下你的后端，它会从 sql 表中获取数据吗？
你想为你写代码吗？你在Server端做了什么？

标签： javascript jquery html mysql sql

【解决方案1】：

我在这里创建了一个小提琴，它将根据所选按钮的颜色翻转表格。截至目前，它仅适用于前两个按钮。 rest 可以类似地结盟

这里是JS FIDDLE

代码更改于

$("#btn_Blue").click(function() {

相反，如果您使用 sql 在 jquery 中获取表数据，您可以按照以下步骤操作：

用您的 sql 数据替换脚本中的 color 这是支持的小提琴：JS FIDDLE

【讨论】：

【解决方案2】：

HTML：

<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>

JS：

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

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

工作小提琴：https://jsfiddle.net/7qbt2voj/

【讨论】：

【解决方案3】：

如果桌子不是很大。您可能总是从服务器获取所有行，而不是在前端对其进行过滤。例如向每个tr 添加标记类而不是隐藏/显示它。

<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);
});

【讨论】：