CSS vs jQuery How to create dynamic table style (zebra) without others plugins?


Tags: javascript,jquery,html,css,html5

Problem :

I need to style the table as a zebra, styling even rows of tables, I used the css :nth-of-type(even). But for example when I need to hide some of the stylized elements of the table is lost. What's the easiest way to create a dynamic styling as a zebra for a table?

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <style type="text/css">
    table tr:nth-of-type(even){background: yellow;}
  </style>
  <script type="text/javascript">
    function hideRow(){
      $(".hidden").hide();
    }
  </script>
</head>
<body>
<center>
 <table cellspacing="0" border="1">
     <tbody>
    <tr class="table-row">
      <td>row1</td>
    </tr>
    <tr class="table-row">
      <td>row2</td>
    </tr>
    <tr class="table-row hidden">
      <td>row3</td>
    </tr>
    <tr class="table-row">
      <td>row4</td>
    </tr>
    <tr class="table-row">
      <td>row5</td>
    </tr>
    </tbody>
 </table>
 <input type="submit" onclick=" hideRow()" value="submit"/> 
 </center>
</body>
</html>

How can I dynamically change the style of the table?

Сurrent result:
enter image description here enter image description here
Expected result:
enter image description here enter image description here



Solution :

When you hiding elemment, its still there (just hidden), so thats why you have this problem. Ill suggest you to create simple script against css :nth-of-type(even) selectors. First, two clases:

.table_odd { color: yellow; } 
.table_even {color: white; }

Now crete function:

function refrestTableColoring( $tableSelector ) {
    $tableSelector.find('tr:odd:not(.hidden)').removeClass('table_even').addClass('table_odd');
    $tableSelector.find('tr:even:not(.hidden)').removeClass('table_odd').addClass('table_even'); 
}

And then usage is simple. Call on document ready and when you're hiding element:

refrestTableColoring( $('table') );

    CSS Howto..

    How can I give a javascript element a CSS class?

    How to change first word color through css [duplicate]

    How to make the whole div clickable

    How to position many DIVs in CSS

    How to change height of ui-grid row?

    how to apply jquery ui/css to forum field

    How to dynamically add a CSS class and implement its style in JavaScript

    How to make a div fill the remaning vertical space using css

    css/html, how to scale and center a logo image

    How do I style a different border?

    Button Built in CSS showing different font color in FF and Webkit

    How to set a background-color to element which has the same id with anchor of url?

    css breadcrumbs breaks into 2 lines, how to controll it in responsive?

    How to set margin for elements in my case

    Show separation between newlines in textarea

    How to pause a CSS keyframe animation when it ends the first cycle?

    How to detect single letters and modify their look/css

    How to remove whitespace that appears after relative positioning an element with CSS

    How to hide main menu while showing sub-menu in css

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How often to use REM in CSS [closed]

    How to get 2 fixed and 1 dynamic column in CSS

    How to apply different CSS styles to 2 elements with the same class name?

    How to Automatically Close Alerts using Twitter Bootstrap

    How to display inline input in li?

    Simple slideshow not working properly

    How to select a css class as selected dynamically in mvc

    How to apply “!important” from CSS via jQuery? [duplicate]

    How do I stick my footer to bottom of the page with Google Chrome?

    How to exclude specific the form from the css applied to body [duplicate]