How do I manipulate tr > td background with only selective rows.
I am using a low code no code tool where I cant pass custom class to particular areas, I have a tr > td >span>a I want to apply background color to this row. Note that I cant pass a custom class to that particular <tr> or <td>. All of the tr > td has a span tag but only some has <a> I want to change background of all <td> under that <tr> that carries <a> tag.
Please find the attached screenshot. If more clarity is required or I missed something please let me know so I can explain further. Thanks in advance.
50 Replies
I appreciate your prompt response but this isn't working either. I tried has pseudo operator earlier too but it applies on tr since tr doesnt take background css property all struggle in vain. I still thank you for replying.
the background on tr should work, but you can also apply it to all tds
tr:has(> td a) > td <-- like thisI will try this bro, thanks. The module is currently in deveopment and its not visible on the frontend currently so I cant comment if it worked or not. Thanks a lot for giving your inputs brother much appreciated.
you're welcome
Hi bro so using this the structure becomes like this
and background still remains white
And by using this whole table gets background
I’d try
#tableId tr:has(> td:has(a)) td{ background-color: #ddd }
If this continues to not work, then I am assuming there is an anchor tag on every row. If you find out the different row only has anchors in the 4th column or something you could also try
#tableId tr:has(> td:nth-of-type(4):has(a)) td { }Let me try this one too. Thanks bro.
The rows can be dynamic so nth of type wont be effective here. For some reason
#tableId tr:has(> td:has(a)) td{ background-color: #ddd } its not getting applied, not visible in styles tab.
#jsGrid_gridToShowCreatedSubmissions tr:has(> td:has(a)) td{
background-color: #ddd;
}can you control the html?
I cant control the grid tr td
If that would have been possible life would be happier.
then can you add a class to the tr, if it will have a link?
I am sorry I mistyped
I cant control*
ah, thats different
this works partially
its getting applied on the row I am trying to manipulate
and what do you want to change?
Only that row's td's
The rows that has this flow
tr>td>span>a
This a is important coz other rows flows like
tr>td>span -> there is no a tag in these
tried this tr:has(a)>td but its getting applied to each td of the table.thats because all have a link
tr:has(> td:last-child a)
this should workI will try this gimme a moment
It didnt work sorry bro, not visible anywhere on styles tab 😭
just jumping in here... I feel that would much easier if you could provide the actual HTML table. Otherwise it really is just guess work.
whats the class of the link?
yeah, we are just throwing "random" bs and hoping it sticks
for example this
tr:has(a)>td should work. If it isn't, as has already been suggested, the other rows must also have links in them.yes, and my suggestion should work too
if it didnt, there has to be extra tds at the end
The msg is getting too big if I am sending it in formatted way will it be fine if I send in unformatted way?
<table class="jsgrid-table"><tbody><tr class="jsgrid-row"><td class="jsgrid-cell" style="width: 100px;"><span><a type="button" href="javascript:void(0);" class="btn fas fa-angle-up"> Submission 1</a></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td></tr><tr class="jsgrid-row"><td class="jsgrid-cell" style="width: 100px;"><span>AIG Group</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Cargo (Global Transit)</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Cargo Global Transit Spec 1</span></td><td class="jsgrid-cell" style="width: 100px;"><span>26/09/2024</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Ketan Kulawade</span></td><td class="jsgrid-cell" style="width: 100px;"><span>DRAFT</span></td><td class="jsgrid-cell" style="width: 100px;"><span><div class="dropdown"><button class="marketedit-btn fas fa-ellipsis-h" style="border: none; background-color: white;"></button><div class="dropdown-content"><a class="fa fa-edit" href="javascript:void(0);"> Amend Draft</a><a class="fa fa-trash" href="javascript:void(0);"> Delete Draft</a></div></div></span></td></tr><tr class="jsgrid-alt-row"><td class="jsgrid-cell" style="width: 100px;"><span><a type="button" href="javascript:void(0);" class="btn fas fa-angle-up"> Submission 2</a></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td></tr><tr class="jsgrid-row"><td class="jsgrid-cell" style="width: 100px;"><span>AIG Group</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Cargo (Global Transit)</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Cargo Global Transit Spec 1</span></td><td class="jsgrid-cell" style="width: 100px;"><span>27/09/2024</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Shubham Lutade</span></td><td class="jsgrid-cell" style="width: 100px;"><span>DRAFT</span></td><td class="jsgrid-cell" style="width: 100px;"><span><div class="dropdown"><button class="marketedit-btn fas fa-ellipsis-h" style="border: none; background-color: white;"></button><div class="dropdown-content"><a class="fa fa-edit" href="javascript:void(0);"> Amend Draft</a><a class="fa fa-trash" href="javascript:void(0);"> Delete Draft</a></div></div></span></td></tr></tbody></table>
Sorry for that messwe just need a row
<tr class="jsgrid-row"><td class="jsgrid-cell" style="width: 100px;"><span><a type="button" href="javascript:void(0);" class="btn fas fa-angle-up"> Submission 1</a></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td><td class="jsgrid-cell" style="width: 100px;"><span></span></td></tr>and the one that needs styles?
and the next row thats doesnt have a tag
<tr class="jsgrid-row"><td class="jsgrid-cell" style="width: 100px;"><span>AIG Group</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Cargo (Global Transit)</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Cargo Global Transit Spec 1</span></td><td class="jsgrid-cell" style="width: 100px;"><span>26/09/2024</span></td><td class="jsgrid-cell" style="width: 100px;"><span>Ketan Kulawade</span></td><td class="jsgrid-cell" style="width: 100px;"><span>DRAFT</span></td><td class="jsgrid-cell" style="width: 100px;"><span><div class="dropdown"><button class="marketedit-btn fas fa-ellipsis-h" style="border: none; background-color: white;"></button><div class="dropdown-content"><a class="fa fa-edit" href="javascript:void(0);"> Amend Draft</a><a class="fa fa-trash" href="javascript:void(0);"> Delete Draft</a></div></div></span></td></tr>
It needs background
this doesnt.you told us the opposite
but the next row does have a <a>
but hey, easy enough
tr:has(.dropdown) and tr:not(:has(.dropdown))
that should do itOhhh no there is discs that carries dropdown and they have a tag
sorry my bad guys
OMG
Love you guys
THANKS A LOT
@ἔρως +rep bro thanks for sticking by. Really mean a lot and everyone who jumped in to help.
this should be a tr with a td that has a coldpan of 5 or 6, depending on the number of tds
that will be a lot easier to style
you then can set the background of the table to white, and the
td[colspan] to gray
and it is a lot more maintainableTrue but we cant manipulated the tr td of the grid limitations of Low Code No Code tools
🤮 low/no code
😂
but hey, if you dont have control, the selectors ive sent are probably the best options
maybe only
tr:not(:has(.dropdown)) td{} this worked likka charmI know that @ἔρως has already shown the solution but, now seeing the actual code, it is clear that there are multiple ways that this could be achieved.
For example:
yeah, and all are flawed because of lack of control of the html
Thanks Chris next time onwards I will make sure to share the code snippet for better understanding
if you can show a live example with just the important part, that helps even more
True, I will keep this in mind bro. Thanks a lot once again.
you're welcome
Hi @ἔρως, I am stuck in kinda tricky situation where I need to add margin based on a condition. Its not getting applied. The HTML for that is huge. Is it fine if I may ask if we can try and find a solution to this over a voice channel?
if you have an issue that isn't related to this one, please make a new post. And please don't @ people to get them to help you, it's against the rules and puts folks on the spot
ok