Databases
StackOverflow2013
Postsdbo
POTreeView how to select 2nds tr in table with css to set BackColor for complete Parent Nodes rows
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTreeView how to select 2nds tr in table with css to set BackColor for complete Parent Nodes rows
    text
    copied!<p>I've been trying to find the answer to this with tips on other posts <a href="https://stackoverflow.com/questions/2233809/css-selector-picker-finder">CSS Selector picker/finder?</a> and the closest partial solution I found to do what I want to do is this: <a href="http://asp-net-example.blogspot.com/2009/04/how-to-set-change-treeview-parent-node.html" rel="nofollow noreferrer">http://asp-net-example.blogspot.com/2009/04/how-to-set-change-treeview-parent-node.html</a></p> <p>All I need is to set the background color for all the Parent Nodes to #F0F0F0 as you can see in the link above, the line below will only set background color for the parent area, but no for the complete row . I want to have all the Parent Nodes rows with same background color.</p> <pre><code>&lt;ParentNodeStyle Font-Bold="False" BackColor="#F0F0F0"/&gt; </code></pre> <p>I also tried different combinations of nth-child including the line below but it does not work:</p> <pre><code>table.trvFileTree tr:nth-child(2) { background-color: #F0F0F0; } </code></pre> <p>I've used Dom Inspector plugin and as you can see I want all the 2nd trs to have an specific background color. </p> <p>Also, I've tried to get full path of the second tr selector by using firebug :</p> <pre><code>html body form#form1 div div.fullWidthWrp div.InnerfullWidth div.LCol div.InnerLCol div#trvFileTree.treeViewDim div#trvFileTreen0Nodes table tbody tr </code></pre> <p>Thanks a lot for your help in advance.</p> <p>Note: could not post screenshots here on stackoverflow since it needs more than 10 reputation points. However, I posted the screenshot of what I need on droplr image share site: <a href="http://d.pr/i/OVIp" rel="nofollow noreferrer">http://d.pr/i/OVIp</a></p> <p>UPDATE (the code below is almost exactly the same as my code, but I decided just to put code for the treeview so that code only shows what it needs to be done):</p> <p>1) This is the complete code for the TreeviewExample.aspx <strong>ideone.com/3PXbSE</strong> </p> <p>2) This is the complete rendered markup for TreeviewExample.aspx <strong>ideone.com/wpctLP</strong> </p> <p>3) This is the screenshot of the browser view of TreeviewExample.aspx <strong>d.pr/i/8ni6</strong> </p> <p>As you'll see the complete code on #2) is almost the same as the one rendered below (has same table structure) </p> <p>The markup below is part of the code generated by the treeview control and shows the Parent node rows that I want to have with different background color: (copied from firebug with only some of the important nodes expanded so that markup is easier to read)</p> <pre><code> &lt;div id="trvFileTree" class="treeViewDim" style="width: 100%;"&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;tr style="height: 0px;"&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div id="trvFileTreen0Nodes" style="display: block;"&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;tbody&gt; &lt;tr style="height: 0px;"&gt; &lt;tr&gt; &lt;%--This row contains a parent node, and I want to set the background color for all the row--%&gt; &lt;tr style="height: 0px;"&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div id="trvFileTreen1Nodes" style="display: block;"&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;tbody&gt; &lt;tr style="height: 0px;"&gt; &lt;tr&gt; &lt;%--This row also contains a parent node, and I want to set the background color for all the row--%&gt; &lt;tr style="height: 0px;"&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;%--These tables contain child nodes--%&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;/div&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;div id="trvFileTreen5Nodes" style="display: none;"&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; &lt;tbody&gt; &lt;tr style="height: 0px;"&gt; &lt;tr&gt; &lt;tr style="height: 0px;"&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;table cellspacing="0" cellpadding="0" style="border-width: 0;"&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload