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

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
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USkami
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI think it would be helpful if you were a bit more clear about what you mean by "I want all the 2nd trs to have an specific background color." Are you saying you want all of the child leaf notes to have the same color as the parent node? What do you mean by "complete row" in your second paragraph? The example you refer to is a TreeView and not a DataTable.
      singulars
      1. POTreeView how to select 2nds tr in table with css to set BackColor for complete Parent Nodes rows
      1. USJaaromy Zierse
    2. COI was going to add some screenshots to make it easier to understand, but stackoverflow did not allow me to upload the images. As I mentioned before, I want the complete row for each Parent Node to have a background color. The treeview control is rendered my multiple tables, and in all the tables generated by the .net treeview control I noticed that the 2nd tr is the one that contains each Parent Node. I added an additional example above directly from the code rendered (copied from firebug)
      singulars
      1. POTreeView how to select 2nds tr in table with css to set BackColor for complete Parent Nodes rows
      1. USkami
    3. COhave you looked in Firebug to see what styles are actually being applied. Your `nth-child()` looks like it should work, so perhaps it's being overridden by other styles. Firebug's CSS inspector will give you a full list of all styles for a given element including those that are valid but overridden (it shows them crossed out). Also, have you tried using `nth-of-type()` rather than `nth-child()`?
      singulars
      1. POTreeView how to select 2nds tr in table with css to set BackColor for complete Parent Nodes rows
      1. USSpudley
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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