CODEWITHSUNDEEP
jqueryhtmlcss
Filth
Filth

Reputation: 3228

Hide / Show Specific Table Rows

I need to be able to hide on default specific rows within a table.

Basically this is a "My Basket" page within a e-commerce site and the idea here is to be able to show all instances of more than one of the same product.

Example: Say you choose in quantity to have 3 goats - underneath the product displayed there is a link which says "Show all instances". What this means is to show each instance of the total 3 goats you want if you were to click on the anchor.

Here is an image of what I'm doing / trying to achieve:

enter image description here

So, the issue I'm having is how to structurally put the "show all instances" rows together in the HTML. Create another table underneath the parent row? I thought this and came into the issue of how to position the "instances" with the correct product.

Here is my HTML code so far - this code just shows what I have done to achieve each product row: 

<div class="item-section">
        <span class="section-heading">Smiles Gifts</span>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-bottom: 1px dotted #666666;padding: 0 0 5px 0;" >
            <tr>
                <th class="col-1">&nbsp;</th>
                <th class="col-2">Qty</th>
                <th class="col-3">Frequency</th>
                <th class="col-4">Card Type</th>
                <th class="col-5">Edit/Remove</th>
                <th class="col-6">Subtotal</th>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td class="item col-1 clearfix">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <img src="images/cart_dummy_image.jpg" alt="" />
                            </td>
                            <td>
                                <span class="product">World Food Programme</span>
                                <!-- LINK TO SHOW OTHER INSTANCES -->
                                <a class="show-instances" href="#">Show all instances</a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="col-2"">1</td>
                <td class="col-3">One Off</td>
                <td class="col-4">&nbsp;</td>
                <td class="col-5">
                    <a href="#" class="blue-anchor">Edit</a>
                    <a href="#">Remove</a>
                </td>
                <td class="col-6">$45.00</td>
            </tr>
</div>

Hopefully the information provided is detailed enough but if not let me know any questions and I will do my best to assist!

Upvotes: 0

Views: 2003

Answers (1)

code-jaff
code-jaff

Reputation: 9330

For the HTML simply add more rows for each entry, then you need to do some tweaks in java-script to hide and show those rows. I would prefer jQuery because it handles DOM elegantly.

Here simple way to accomplish your task, (only posting javascript)

var link = $('<a class="show-instances" href="#">Show all instances</a>');
$('tr.main').hide().first().find('.product').parent().remove('a').append(link);
$('tr.main').first().show();

$('table').on('click', 'a.show-instances', function() {
    var selectedClass = $(this).closest('tr.main').attr('class').split(' ');
    $('.' + selectedClass[1]).not(':has("a.show-instances")').toggle();
    return false;
});​

Look at the working DEMO

Upvotes: 1

Related Questions