How do I select the radio from a list of tr's where the only unique element is 'Some unique value'?
<tr>
<td>
<input type="radio" name="myradioname" value="4" onclick="myevent">
</td>
<td>
Some value
</td>
<td>Some unique value</td>
</tr>
While this cannot be done using pure CSS, it can be achieved using jQuery's :contains selector..
Working jsFiddle
The selector you're looking for is:
$("tr:contains('Some unique value')").find('input[type="radio"]')
First you look for a <tr> that contains 'Some unique value', then you find input[type="radio"] within it.
Works like a charm. In the jsFiddle only the radio near 'Some unique value' gets checked on page load using this selector.
Notes:
There are other ways you can go about it, for e.g finding the <td> that contains 'Some unique value' then looking for the <input> inside its siblings.. However I think the way presented here is most efficient.
If you can select the table first and search only the rows inside it do it, for it will run faster.. e.g: $("#myTable tr:contains('Some unique value')").find('input[type="radio"]').
If you still want to do it using CSS alone I would recommend viewing your server side code and using a conditional statement for adding a class to that specific <tr> for example class="special" then adding a CSS rule like so: .special input[type="radio"]{...}
Related
JSFiddle: https://jsfiddle.net/dc9wdwem/
I inherited a legacy application that some clients are still using and expecting upgrades for. One recent upgrade "broke" the existing CSS and the easiest way to resolve it is to "un-break" just one little table.
The markup is nested table upon nested table. But for the sake of stripping down to the bare essentials, here's the barest version of where to find my table.
<div id="someId">
<table>
<tr>
<td>
<table>
<tr>
<td>
<table> <!-- not this table --> </table>
</td>
<td>
<table> <!-- THIS ONE!! --> </table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
There are other tables and rows and cells scattered throughout, but this structure gets you there.
Using the "direct descendant" symbol is tricky because the tables are descended within rows and cells as well as other tables. So table>table>table isn't going to do it. But then if you go with a general descendent selector, you end up selecting too many things table table table will get you a whole bunch of tables. Here's the closest I got so far:
#someId>table table td:nth-child(2) table {
background-color: red;
}
I would normally be glad to add even more > selectors; however, I believe the browsers themselves are filling in tbody elements and so forth and I don't know that I can reasonably predict that the proper structure will always be intact. The above selector is selecting more tables than the one I'm trying to isolate.
None of the nested tables have IDs or classes, and nor do I have the opportunity to add them in. The upgrade process does not upgrade the customer's markup, which they may have themselves partially customized over time.
Anybody have any CSS selector magic that will work, assuming the above markup alongside browser-filled elements like tbody?
This will work for the specific HTML in your fiddle:
#someId>table table:nth-of-type(1) td:nth-of-type(2) table {
background-color: red;
}
Obviously, if the HTML changes in pretty much any way, this is probably not going to work.
You missed a Table in your css.
try:
div#someId > table table table td:nth-child(2) > table
https://jsfiddle.net/ba52Lwkg/
#someId > table table:first-of-type td + td > table
this should work.
https://jsfiddle.net/dc9wdwem/
The HTML page contains a table of users details.
I need to remove user.
I can select the first element in the row by username.
I need to select the "Delete" button on that row to delete that user.
The HTML structure is:
<table id="tblUsersGrid" cellpadding="2">
<thead>
<tbody>
<tr class="aboutMeRow" data-parentid="223">
<tr>
<tr>
...
<tr>
<td class="cell cell_278 cell_NameCell">xoxo</td>
<td class="optionIcon overrideFloat orgIcon cell cell_278 gridCell"></td>
<td class="cell cell_278 gridCell">Custom</td>
<td class="cell cell_278 gridCell">qaadmin</td>
<td class="cell cell_278 gridCell">0</td>
<td class="cell gridCell">
<div class="removeAccountIcon"></div>
<td class="cell gridCell">
<div class="editAccountIcon"></div>
</td>
<td></td>
</tr>
So I can easily select the desired row by
driver.findElement(By.xpath("//td[#class='cell_NameCell'][contains(text(),'xoxo')]"))
But how can I reach the removeAccountIcon element on that row?
I saw many questions dealing with selecting elements inside tables but didn't find solution for this issue.
Is there a way to do this by CSS selector, not only by Xpath? (I am sure there is a Xpath solution for this).
You can make it in one go using the following XPath expression:
//tr[td[contains(#class, 'cell_NameCell')] = 'xoxo']//div[#class='removeAccountIcon']
Here we are locating the appropriate tr row by checking the text of the td element containing cell_NameCell class (this is your username cell). Then, we locate the "Remove Account Icon" inside this row.
Xpath axes preceding-sibling would helps you to resolve the issue. You can try below xpath:
//td[preceding-sibling::td[contains(text(),'xoxo')]][5]/div[#class='removeAccountIcon']
Let me know if it works for you.
If you can select the correct row, you can select the desired element within that row by calling findElement on that row instead of the original driver. However, the code you suggested for finding the correct row doesn't appear to work. (It selects a td instead of a tr.)
I would suggest the following:
WebElement userDataInRow = driver.findElement(By.xpath(//td[contains(text(),'xoxo')]))
WebElement row = userDataInRow.findElement(By.xpath(".."))
row.findElement(By.xpath("//div[#class='removeAccountIcon']"))
The second line goes to the parent element of the selected td element.
I don't think there is an option to find the parent by using the css selectors.
This article gives other alternates for finding the same.
To capture the "Remove" button by using the xpath, we just need to traverse back to the parent of the "Name" cell of the table and then fetch the "div" of the "remove link/button".
Then your xpath //td[#class='cell'][contains(text(),'xoxo')] should be updated as below :
//td[contains(text(),'xoxo')]/../td/div[#class='removeAccountIcon']
This will capture the "Remove Account Icon" based on the given name.
I'm testing with Selenium Webdriver in Firefox and ideally also in IE8.
Here is my html structure:
<table id="table">
<tbody>
<tr>
<td>Text1</td>
<td><a id="assign" href="/assign/1>Assign</a></td>
</tr>
<tr>
<td>Text2</td>
<td><a id="assign" href="/assign/2>Assign</a></td>
</tr>
<tr>
<td>Text3</td>
<td><a id="assign" href="/assign/3">Assign</a></td>
</tr>
</tbody>
</table>
Basically what I need to do is this:
Click on the assign link on the row that contains Text1
So far i came up with the XPATH: //*[#id='table']//tr/td//following-sibling::td//following-sibling::td//following-sibling::td//a that selects all the assign links. Changing it to //*[#id='table']//tr/td[text='Text1']//following-sibling::td//following-sibling::td//following-sibling::td//a returns "No matching nodes" from Firebug.
However, I want a CSS selector for this. So, i tried #table>tbody>tr:contains('Text1') but Firebug returns "Invalid CSS Selector".
Any suggestions ?
You should find the td that has preceding td sibling tag with Text1 text, then get the a tag:
//table[#id="table"]//td[preceding-sibling::td="Text1"]/a[#id="assign"]
Alternatively you can find 'tr' having 'td' with text = 'Text1' and then inside the 'tr' find 'td' having text 'Assign'
//table[#id='table']//tr[td[.='Text1']]/td[.='Assign']
About css selectors, there are no pure css selector for text based search. 'contains' is not standardized yet, so may not work in your case.
Okay, the title is worded terribly, I know. I really don't know exactly how to describe this.
I am editing a "website" but I don't have access to HTML or Javascript or PHP or anything else. Only CSS, and I can creatively manipulate the HTML already presented in the website.
<div id="list">
<table>
<tbody>
<tr>
<td class="td1">blahblahblah</td>
<td class="td1">blahblahblah</td>
<td class="td1">blahblahblah</td>
<td class="td1"><a href="bleach.com">Bleach</td>
<td class="td1">Score: 9</td>
</tr>
<tbody>
</table>
<table>
<tbody>
<tr>
<td class="td2">blahblahblah</td>
<td class="td2">blahblahblah</td>
<td class="td2">blahblahblah</td>
<td class="td2">Naruto</td>
<td class="td2">Score: 10</td>
</tr>
<tbody>
</table>
</div>
So this is basically how it's set up. These are 2 anime, Bleach and Naruto. Naruto's score is a 10, Bleach's is a 9. My goal is to select the parent table of the anime that contains a score of 10 so that I can set up a specific hover animation event using keyframes whenever an anime with a score of 10's table is hovered over.
Now the way this is set up, I don't think there's any way to do it other than manually selecting each anime with a score of 10 by doing something like #list > table > td:nth-of-type(4) a[href*="naruto.com"] though I'm not sure that's relevant. That's how I can select the child, but how do I select the table parent to style it for hover? There must be a way. :(
Appreciate any help you can offer. If you leave a comment within the next day I should be able to respond back immediately.
Thanks.
Please keep in mind, I can not simply give a table a class or id. I have no access to adding or editing anything within the set HTML. So I need to figure out a different method. Also, selecting the table by doing #list table:nth-of-type(n) is not possible because the list of tables will be ever-changing (tables added/removed), can be sorted (altering n), and the sheer volume (we're talking hundreds of tables) etc. which would throw it out of play.
This is not possible using only CSS. You need to select for an attribute at least. There was a proposal for a :content selector for CSS 3, but that didn't end up in the spec. (More info here).
My spirits were not dampened. I figured out a way to do it. By manipulating another td I don't need that's within the table that has a score of 10 and setting it to transparent and positioning it over the entire table, giving it a z-index of 1, and all of the other elements within the table a z-index of 2, I can cause the event on table hover to occur as I wished. :) I'm just posting this here in case anyone ever has a problem like this and this may help them as well.
I have a simple asp.net web page that contain a table with about 5 TR and each row have 2 TD .. in the page load I get user data ( 5 property ) and view them in this page the following are first 2 rows :
<table>
<tr>
<td>
FullName
</td>
<td>
<span id="fullNameSpan" runat="server"></span>
</td>
</tr>
<tr>
<td>
Username
</td>
<td>
<span id="userNameSpan" runat="server"></span>
</td>
</tr>
</table>
I always used <asp:Label to set value by code but i always notice that label converted in runtime to span so i decided to user span by making him runat=server to be accessed by code, so
Which is better to use asp:label or span with runat=server ??
The answer is: Whatever works best for you.
asp controls have a different object model from html controls. There is no databinding for html controls, for instance.
EDIT:
Something to consider is whether or not you need a span element at all. Span is an html element used for inline items, and canoot hold ceratin kinds of other items (such as block items). If your html markup make sense to semantically include a span (such as you want to style the text in a specific way) then use it.
Unless you need to control attributes on the span tag, it would be better to do something like this though:
<span class="foo"><asp:Literal id="litFoo" runat="server" /></span>
You should only make an element runat="server" if you need to specifically modify the tag itself (not necessarily just it's contents). For instance, if you need to hide the span at runtime, then you make the span runat="server" so you can access it's Visible property at runtime. Otherwise, it should be left as standard html.
If all your doing is displaying something then your better off using a literal tag which add's no extra markup. Infact 99% of the time literal should be used over label.
Edit: The performance between label/span would be so tiny, if any difference between them at all, that the only reason you would be worrying about that sort of performance was if you were facebook.