How to set alternate row color for a given attached diagram


Tags: c#,css,asp.net-mvc,entity-framework

Problem :

Description : In the below diagram a table consists of rows with expand window. The expand view details are also in a row. So, a single record kept in two rows. One row in main table and another row is while expanding. So, here we need to apply alternate row color for main table other than expanding rows. How we can apply alternate row color for main rows.

send css class for MVC

enter image description here



Solution :

jQuery (javascript) Method - Best for compatibility.

In the example below the first nth-child filter selects every 4th item starting from the 1st. Then it filters every 4th item starting from the 3rd. This will work in pretty much every browser you throw at it.

jQuery(document).ready(function(){

    $('tr')
        .filter(':nth-child(4n+1)').addClass("rowColor1")
    .end()
        .filter(':nth-child(4n+3)').addClass("rowColor2");

});

DEMO - http://jsfiddle.net/6r22F/1/

Pure CSS Method - Best for speed and purity.

A simpler method is to use CSS. It will be the fastest method and means you don't have script running unnecessarily. It may not work in older browsers though so check the browser stats for your user demographic.

tr:nth-child(4n+1) {
        background: rgba(255,0,0,1);
}
tr:nth-child(4n+3) {
        background: rgba(255,0,0,0.5);
}

DEMO -

http://jsfiddle.net/f3hk8/1/


    CSS Howto..

    creating a slide show for home page in my web site [closed]

    How to organise my web content?

    How to change CSS styling from within Angular 2 Component

    Css Trick - How to align this div

    Show different text based on OS

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    How to get uncompressed css output while using LESS(less-watch-compiler.js)?

    CSS: How to place next to each other 2 images with 50 % width?

    How do I specify in HTML or CSS that a table column should have the minimum width

    How to ignore CSS img styling for certain sections of the website?

    Navbar on left of page, how to let content resize to match screen size?

    How to make a dynamic-height DIV [duplicate]

    How to auto width a form element with CSS?

    How do I place text to the right of a relatively positioned image?

    How can i get my Jchartfx area graph to show up underneath my gridview?

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to figure out which lines of css is not actually affecting anything again?

    How to display size and icon for pdf and word docs?

    How do I isolate an image from the html so that I can edit where it goes on the website?

    how to style xml tag attribute with css

    How to give style to iframed page content using parent pages css?

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

    How to select other (sibling) elements CSS?

    How to do HTML/CSS form helpers/popover

    How to reload CSS when using Less.js

    How to run a different html file when device width changes?

    How to paste a style sheet into a new document window in a Rally app

    How to indent input controls for a nested HTML list using CSS to a single column

    ASP.Net MVC: How to use razor variable in CSS file

    How to have an image zoom in and out automatically in the background