ansaurus

Question

How do I hide the middle of a table using jQuery?

Answer 1

+2 A:

The easiest way is to add a <tbody> in to group the rows and toggle that between none and table-row-group (catch exceptions and set it to block for IE). Not sure about making it specific to jquery but that's the "normal" way of doing things.

Greg 2008-10-18 16:27:43

Answer 2

+22 A:

Something like this could work:

<table>
    <tbody>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
    </tbody>
    <tbody class="Table_Middle" style="display:none">
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
    <tbody>
      <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
</table>


$('#something').click( function() {
    $('.Table_Middle').hide();
    $('.Show_Rows').show();
});

$('.Show_Rows').click( function() { 
    $('.Show_Rows').hide();
    $('.Table_Middle').show();
});

Parand 2008-10-18 16:33:00

That's not good because you are not allowed a <span> element directly inside a <table> element in HTML or XHTML. I think this would be OK if you used tbody instead of span.

SpoonMeiser 2008-10-18 16:36:54

You're right, I was being lazy, changed it to be tbody.

Parand 2008-10-18 16:39:01

I'll un-down-vote you then :)

SpoonMeiser 2008-10-18 16:39:36

Thanks! I added a complete working example after viewing and understanding your example answer.

Brian Boatright 2008-10-18 17:45:36

btw you are missing a closing ) on the first function call.

Brian Boatright 2008-10-18 17:48:10

This is similar to what I would have suggested - upvote

belugabob 2008-10-19 18:54:43

Answer 3

+1 A:

I'd probably do it like this:

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody id="hidden-rows">
        <tr>
            <td colspan="3">
                <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();">
                    Show hidden rows
                </a>
            </td>
        </tr>
    </tbody>
    <tbody id="extra-rows" style="display: none;">
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
</table>

It's not a great method, because it doesn't degrade nicely.

To get it to degrade nicely, you'd have to have all the rows shown initially, and then hide them with your jQuery document ready function, and also create the row with the link in.

Also, your method of giving the rows to hide a particular class should also work. The jQuery would look something like this:

$(document).ready(function() {
    $('tr.Table_Middle').hide();
});

You'd still need to create the row with the link to unhide them though.

SpoonMeiser 2008-10-18 16:35:38

Answer 4

+1 A:

If you give your middle <tr /> tags the "Table_Middle" class it makes it much easier to do. Then it only takes a few lines of jQuery. One to add the "Show Full Table" row, and another to add a click listener for that row. Make sure to change the colspan attribute's "X" value to the number of columns in your table.

 // jQuery chaining is useful here
 $(".Table_Middle").hide()
                   .eq(0)
                   .before('<tr colspan="X" class="showFull">Show Full Table<tr/>');

$(".showFull").click(function() {
    $(this).toggle();
    $(".Table_Middle").toggle();
});

This is useful because it degrades nicely and is accessible across lots of browsers/devices. If JavaScript is turned off, or CSS is disabled (or any other scenario that could cause this code to not be supported), there is no "show full table" row.

Dan Herbert 2008-10-18 16:40:00

Have you tested this? I think the get method returns a DOM object, not a jquery object, and I think you're only hiding that first Table_Middle row because hide is called after get. I've not tested it either, but if I'm right, then it needs to be re-arranged slightly to work.

SpoonMeiser 2008-10-18 16:59:22

You're right. I can't believe I missed that. "get()" returns a DOM object. I've updated my code sample to acknowledge that.

Dan Herbert 2008-10-18 17:10:49

You could just use .eq(0) instead of .get(0) to return jQuery instead of a DOM element. But this is totally the best answer here.

SpoonMeiser 2008-10-19 12:37:51

Answer 5

+2 A:

Here's a solution which doesn't require any extra markup and it degrades nicely.

<table id="myTable">
    <tbody>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

and the jQuery... I've hardcoded in a few things here (like the table identifier, number of rows to show, etc. These could be put into a class attribute on the table if you wanted it to be more reusable. (eg: <table class="hidey_2">)

var showTopAndBottom = 2,
    minRows = 4,
    $rows = $('#myTable tr').length),
    length = $rows.length
;
if (length > minRows) {
    $rows
        .slice(showTopAndBottom, length - showTopAndBottom)
        .hide()
    ;
    $rows
        .eq(showTopAndBottom - 1)
        .after(
            // this colspan could be worked out by counting the cells in another row
            $("<tr><td colspan=\"2\">Show</td></tr>").click(function() {
                $(this)
                    .remove()
                    .nextAll()
                    .show()
                ;
            })
        )
    ;
}

nickf 2008-10-20 01:39:34

Answer 6

A:

Try to use slice() method:

$("#table tr").slice(1, 4).hide();

Elzo Valugi 2009-10-23 20:05:33

ansaurus

tags:

views:

answers:

How do I hide the middle of a table using jQuery?

related questions