jQuery的按钮来切换SQL结果

Question

我有一个表中列出这样

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

数据库（myTable的）我有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 ="" 

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