apply css style to details view on edit

Hello I have a question, would someone be able to explain to me how to apply alternate row colors to a details view when in edit mode?

I am not finding information about this, maybe because using wrong keywords for search.

Any help would be nice, if examples provided even better!

Thank you much!
metropiaAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
When you go to edit mode, add a class.  http://jsbin.com/EtIQUWeQ/2/edit

Here is the same thing but applying to a class called "edit".  When it the table is not in edit mode:    <table id="MyTable"> and when in edit mode  <table id="MyTable" class="edit">  You may need to do this with js/jquery or if you are doing a page refresh to get to edit mode, then add the class via your serverside code.

<!DOCTYPE html>
<html>
<head>
 <style>
   table#MyTable.edit
   tr:nth-child(odd){background-color:red;
}
  </style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table id="MyTable" class="edit">
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    
  </table>
</body>
</html>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You would use nth child https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Example_selectors and you can simply use nth-child(odd)

table#MyTable{
  tr:nth-child(odd)
}

Open in new window

0
 
metropiaAuthor Commented:
is this to be applied to a detaileview control on a asp.net form?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That is your external style sheet.   Your rendered code would look like http://jsbin.com/EtIQUWeQ/1/edit

I am not a .net dev but I think your table would be

<asp:Table id="MyTable"  runat="server" />

The external css would create the formatting.
<!DOCTYPE html>
<html>
<head>
 <style>
   table#MyTable
   tr:nth-child(odd){background-color:red;
}
  </style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table id="MyTable">
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    
  </table>
</body>
</html>

Open in new window

0
 
metropiaAuthor Commented:
i see. it sort of works.

the thing is that i need the style only applied when the details view is on Edit mode.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.