Question

我在数据库中有一个表（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 Buttons，如果你单击一个按钮，它会切换一个显示上述信息的表

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

Answer 1

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

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

JS

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

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

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

Answer 3

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

这是JS FIDDLE

代码在

处更改

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

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

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

Jquery按钮切换sql结果

3 个答案: