顯示/隱藏按鈕javascript

Question

我正在使用PHP，我正在嘗試從數據庫中檢索一些數據。 這些數據是帶有一對字符串的數字列表。 我簡單地得到所有的數據，並用一個回波-ED一系列<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/