我在数据库中有一个表(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 =""
答案 0 :(得分: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);
});
答案 1 :(得分:1)
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();
});
});
答案 2 :(得分:1)