4

I have a table that, with bootstrap, uses :nth-child to style alternating table rows. However, whenever I remove a row with jQuery .hide() the alternating rows break.

HTML:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<table id='t1' class="table table-bordered table-striped table-condensed table-hover table-even-widths">
    <thead>
        <tr>
            <th>Heading A</th>
            <th>Heading B</th>
            <th>Heading C</th>
        </tr>
    </thead>
    <tbody>
        <tr id='r1'>
            <td>0</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r2'>
            <td>1</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r3'>
            <td>2</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r4'>
            <td>3</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr id='r5'>
            <td>4</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </tbody>
</table>

JS:

$('#r4').hide();

http://jsfiddle.net/saznq/1/

I was wondering if there was an easy way to sort of reset the table with the new configuration. I can always make my own .even and .odd class and filter through the table after every update to remove and reapply the classes, but was hoping for a more elegant solution.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
blitzmann
  • 7,319
  • 5
  • 23
  • 29
  • I don't wish to remove it from the DOM as it's togglable. It's easiest to use `.hide()` and `.show()` rather than adding it to a queue of removed elements, where it was in the table, and yada yada. – blitzmann Dec 14 '13 at 05:49
  • possible duplicate of [Selecting every second visible table row](http://stackoverflow.com/questions/9656915/selecting-every-second-visible-table-row) – randak Dec 14 '13 at 06:33

4 Answers4

5

Aside from $('#r4').remove();, you could use something like this:

$('#r4').after('<tr></tr>').hide();

jsFiddle example

This hides the element, and adds an empty <tr> element after it, displacing its removal and thereby doesn't disturb the :nth-child styling.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • This... might work well. I hate adding 'filler' elements like this, but it seems like it would work. I'll have to play with it a bit and see if it'll work with my implementation. =) – blitzmann Dec 14 '13 at 05:50
  • @Ryan Yea - it works well. I used something like this recently. The problem is that `:nth-child` doesn't know to skip over the hidden elements. This essentially displaces it. – Josh Crozier Dec 14 '13 at 05:52
  • After fiddling a little i came up with other solution `$('#r4').hide().appendTo('table thead');` – laconbass Dec 14 '13 at 06:15
2

This question has already been answered here by Manuel.

This is Manuel's code, using JQuery: 

$('tr').removeClass('alternate')​
$('tr:not(.hide):odd').addClass('alternate')​

And here is the original jsFiddle.

randak
  • 1,941
  • 1
  • 12
  • 22
  • Why is this being downvoted? I have given credit to the original poster and flagged the question as a duplicate. – randak Dec 14 '13 at 06:38
  • 1
    A bit old, but this code works well for me. You had just a typo: $('tr').removeClas('alternate')​ – Marco Jul 29 '15 at 14:02
1

Take a look at this article by Christian Heilmann (December 2013)

Some of the solutions posted there are:

1) Repeating gradient background (CSS only)

FIDDLE

2) Mixture of nth-of-type, nth-child and the tilde selector. (CSS only)

FIDDLE

3) Storing in a cache object

FIDDLE

Danield
  • 121,619
  • 37
  • 226
  • 255
0

EDIT

After reading your comment, i added an example on how to extract the desired row.

$.hide only hides visually an element. You have to remove the element from the DOM, or alternativelly extract it from the table, to get the expected results.

To remove the element, you can use $.remove

$('#r4').remove()

To extract the element, you can use jQuery.appendTo

To extract the row without removing it from the DOM, it must be appended to an element outside the table tbody. This can be done in different ways, but to avoid extra markup you can simply append the element, once hidden, to the table thead.

$('#r4').hide().appendTo('table thead');

laconbass
  • 17,080
  • 8
  • 46
  • 54