Show/hide button javascript

Question

I'm using php and I'm trying to retrieve some data from a db. Those data are a list of number with a pair of strings. I simply get all the data and with a for a echo-ed a series of <tr> elements with inside a series of <td> elements. It worked fine.

Now I'm trying to create a filter to show and hide some elements. For example at first I'd like to show only the odd number then pressing my button I'll show all the number.

Is it possible to do something like that?

where do you exactly have the issue? 1. Retrieving data from db? 2. Displaying them? 3. Validating them 4. Triggering button property? — bonCodigo
– bonCodigo, Commented Nov 12, 2012 at 9:40
The issue is that I don't know how to create a js script to show and hide only some element of my table. Because I thought to save every id of the <tr> element, but I discovered that the <tr> tag doesn't have any id! If the <tr> had an id, the solution is simply getelementbyid and setting those element with style.display = none. But <tr> doesn't have any id... =/ — michoprogrammer
– michoprogrammer, Commented Nov 12, 2012 at 9:49
You can add id just fine: <tr id="row_1"> then you can hide it with document.getElementById("row_1").style.display = "none"; — user447356
– user447356, Commented Nov 12, 2012 at 9:58

Prakash GPz · Accepted Answer · 2012-11-12 10:33:41Z

3

you can do it easily with jquery:

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

answered Nov 12, 2012 at 10:33

Prakash GPz

1,5334 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

michoprogrammer Over a year ago

I don't know jquery... I'm sorry but I'm a newbie in those technologies.. Is jquery a sort of javascript library?

user447356 Over a year ago

@MachoProgrammer yes jQuery is JavaScript library free to use which is very widely used these days on great many websites. Don't feel obliged to use it, for your needs pure JavaScript should be just enough.

Wilf · Accepted Answer · 2012-11-12 10:28:34Z

I'm still not understand what are you looking for but this might be of help.

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 " />

Live version here: http://jsfiddle.net/jquerybyexample/4RpVv/

Ok, I need to learn jquery asap! Thanks for this example, is very helpful!

Collectives™ on Stack Overflow

Show/hide button javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related