Solved

JQuery ASP GridView Color Alternate Rows Skip Header?

Posted on 2014-02-05
4
632 Views
Last Modified: 2014-02-06
I'm trying to use 'index' to alternate row color, problem is the row header is counted. I tried adding +1 to the index and it stops alternating color all together... Help

$('#GridView1 tr:not(:last-child)').each(function (index, row) 
   {
            $('td:gt(2)', this).each(function ()
             {                     
                if (index+1 % 2 == 0) 
                {
                   $(this).addClass('red');
                }
            })
        });

<style type="text/css">
     .red { background-color:Red; }
</style>

<table cellspacing="0" border="1" id="GridView1" ">
        <tr>
        <th>State</th>
        <th>List Name</th>
        <th>Date</th>
        <th>Jones-Bob</th>
        <th>&nbsp;</th>
        <th>Smith-Jim</th>
        <th>Doe-Jane</th>
		</tr>
        <tr">
			<td>IN</td>
            <td>List 1</td
            ><td>7/31/2012</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
		</tr><tr>
			<td>IN</td>
            <td>List 1b</td>
            <td>7/26/2013</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>Not Priced</td>
		</tr><tr>
			<td>OH</td>
            <td>List 2</td>
            <td>7/1/2012</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>$90.00</td>
		</tr><tr>
			<td>OH</td>
            <td>List 2b</td>
            <td>11/15/2013</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>$101.00</td>
		</tr><tr>
			<td>PA</td>
            <td>List 3</td>
            <td>4/1/2013</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>$20.00</td>
            <td>$92.00</td>
		</tr><tr>
			<td>PA</td>
            <td>List 3</td>
            <td>1/1/2014</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>$20.00</td>
            <td>$92.00</td>
		</tr>
	</table>

Open in new window

0
Comment
Question by:WorknHardr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39836198
Any reason to use jquery to do this? CSS can do it itself

 table tr:not(:first-child):nth-child(odd) { background-color:red; }

Though if you set it to even then the first row would be skipped anyway

 table tr:nth-child(even) { background-color:red; }
0
 

Author Comment

by:WorknHardr
ID: 39836430
I must use Jquery and not CSS in this case I have more Gridview conditional cell formatting to do. Alt row color seemed like an easier way to ask the initial question concerning header-row 'skipping'...

I'm mobile today, would the code below work?

$('#GridView1 tr:not(:first-child):not(:last-child):nth-child(odd)').each(function (index, row)
0
 
LVL 58

Accepted Solution

by:
Gary earned 400 total points
ID: 39836449
Well jquery observes the same format as the css above. You don't need an each

$('#GridView1 tr:not(:first-child,:last-child):nth-child(odd)').css("background","red")
0
 

Author Closing Comment

by:WorknHardr
ID: 39838660
Thx
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question