我正在使用php而我正在尝试从数据库中检索一些数据。
这些数据是带有一对字符串的数字列表。
我只是获取了所有数据,并在一系列<tr>
元素内部回显了一系列<td>
元素。
它工作正常。
现在我正在尝试创建一个过滤器来显示和隐藏一些元素。 例如,起初我只想显示奇数 然后按我的按钮我会显示所有数字。
是否可以做类似的事情?
答案 0 :(得分:3)
你可以使用jquery轻松完成:
$('table tr:even').hide();
$('#button-id').click(function()
{
$('table tr:even').show();
});
答案 1 :(得分:1)
我仍然不明白你在寻找什么,但这可能会有所帮助。
<强>的javascript 强>
<script type="text/javascript">
$(document).ready(function() {
$("#gdRows td").each(function() {
var cellText = $(this).text();
if ($.trim(cellText) == '') {
$(this).css('background-color', 'cyan');
}
});
$('#btnHide').click(function() {
$("#gdRows tr td").each(function() {
var cell = $.trim($(this).text());
if (cell.length == 0) {
$(this).parent().hide();
}
});
});
$('#btnReset').click(function() {
$("#gdRows tr").each(function() {
$(this).show();
});
});
});
</script>
<强> CSS 强>
body
{
font-family: Calibri;
font-size : 11pt;
padding : 10px;
}
th
{
font-weight:bold;
padding:5px;
background-color: Lightgrey;
}
table
{
width: 450px;
}
td
{
width:30px;
padding:5px;
}
input
{
font-family: Calibri;
font-size : 12pt;
}
<强> HTML 强>
<table border="1" id="gdRows">
<tr align="left">
<th scope="col">ID</th><th scope="col">ProductName</th><th scope="col">Quantity</th><th scope="col">Price</th><th scope="col">Description</th>
</tr><tr>
<td>1</td>
<td>Mouse</td>
<td>10</td>
<td>100</td>
<td>Great Quality</td>
</tr><tr>
<td>2</td><td>Speaker</td><td>15</td><td>990</td><td> </td>
</tr><tr>
<td>3</td><td>Hard Drive</td><td>35</td><td>3580</td><td>500 GB available</td>
</tr><tr>
<td>4</td><td>RAM</td><td>22</td><td>399</td><td> </td>
</tr><tr>
<td>5</td><td>Keyboard</td><td>10</td><td>3500</td><td>Wireless</td>
</tr><tr>
<td>6</td><td>Wi-Fi Router</td><td> </td><td>3990</td><td> </td>
</tr><tr>
<td>7</td><td>LCD</td><td>62</td><td>3000</td><td>17 inch</td>
</tr><tr>
<td>8</td><td>Intel Processor</td><td>5</td><td>7000</td><td> </td>
</tr><tr>
<td>9</td><td>HeadPhones</td><td> </td><td>350</td><td>Great Quality</td>
</tr><tr>
<td>10</td><td>Monitor</td><td>25</td><td>1990</td><td> </td>
</tr>
</table>
<br/>
<input type="button" id="btnHide" Value=" Hide Empty Rows " />
<input type="button" id="btnReset" Value=" Reset " />