php - 显示/隐藏按钮 javascript

Question

我正在使用 php，我正在尝试从数据库中检索一些数据。这些数据是带有一对字符串的数字列表。我只是简单地获取所有数据，并在一系列<tr>元素中使用一个回显了一系列<td>元素。它工作得很好。

现在我正在尝试创建一个过滤器来显示和隐藏一些元素。例如，起初我只想显示奇数，然后按我的按钮，我将显示所有数字。

有可能做这样的事情吗？

Answer 1

您可以使用 jquery 轻松完成：

$('table tr:even').hide();
$('#button-id').click(function()
{
   $('table tr:even').show();
});

Answer 2

我仍然不明白您在寻找什么，但这可能会有所帮助。

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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td>3990</td><td>&nbsp;</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>&nbsp;</td>
        </tr><tr>
            <td>9</td><td>HeadPhones</td><td>&nbsp;</td><td>350</td><td>Great Quality</td>
        </tr><tr>
            <td>10</td><td>Monitor</td><td>25</td><td>1990</td><td>&nbsp;</td>
        </tr>
</table>
<br/>
<input type="button" id="btnHide" Value=" Hide Empty Rows " />
<input type="button" id="btnReset" Value=" Reset " />

现场版本：http: //jsfiddle.net/jquerybyexample/4RpVv/