<tbody>
<tr>
<td>6</td>
<td>LICENSED CLINICAL SOCIAL WORKER</td>
JOE L BLACK<td></td>
<td>ISLAND WI</td>
<td>08/03/1993</td>
<td>02/28/2017</td>
</tr>
PATH ON WEBSITE::
body > div.main > div:nth-child(3) > div.large-12.columns > table > tbody > tr > a
I need to click on the link that's in <a href="/LicenseSearch/IndividualLicense/SearchResultsSummary?chid=666783"> but I can't seem to get the loop to click on it. Can someone help me?
Tried these codes, none have worked so far:
TAG SELECTOR="HTML>body>div.main>div:nth-child(3)>div.large-12.columns>table>tbody>tr>td:nth-child(3)>a:nth-child(1)"
EVENTS TYPE=DBLCLICK SELECTOR="(/html/body/div[3]/div[3]/div[2]/table/tbody/tr/td[3]/a[contains(#href)" BUTTON=0
TAG XPATH="/html/body/div[3]/div[3]/div[2]/table/tbody/tr/td[3]/a"
TAG XPATH="(/html/body/div[3]/div[3]/div[2]/table/tbody/tr/td[3]/a[contains(#href))"
Related
I want display cricket team details. First row of a table is the captains, so for every first row color, I want to make the font size to be green and bold
This is My HTML:
<div >
<table id="sports" border=1 align=center >
<thead >
<tr>
<th>Team1</th>
<th>Team2</th>
</tr>
</thead>
<tbody *ngFor="let T of Teams" >
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
</table>
</div>
This is my model, where I have taken static data:
export const Players=[
{Indian_players:'Kohili(c)',Australia_players:'David Warner(c)',Pakistan_players:'shaheen Afridi(c)',Southafrica_players:'dale steyn(c)',England_players:'Harry Kane(c)'},
{Indian_players:' Dhoni',Australia_players:'Steve Smith',Pakistan_players:'sarfraz Ahmed',Southafrica_players:'du plessis',England_players:'Joe Root'},
{Indian_players:'Rohit Sharma',Australia_players:'Glen Maxwell',Pakistan_players:'Babar Azam',Southafrica_players:'Imran Tahir',England_players:'Alex Hales'},
{Indian_players:'Jadeja',Australia_players:'Aron Finch',Pakistan_players:'Mohamad Hafeez',Southafrica_players:'David Miller',England_players:'James Anderson'},
{Indian_players:'K.L.Rahul',Australia_players:'Mitchel Starc',Pakistan_players:'Imad Wasim',Southafrica_players:'Jp duminy',England_players:'Moeen Ali'},
{Indian_players:'Bhuvaneswar Kumar',Australia_players:'Travis Head',Pakistan_players:'Shadab khan',Southafrica_players:'de kock',England_players:'Jos Buttler'},
{Indian_players:'Shikar Dhawan',Australia_players:'Pat cummins',Pakistan_players:'yasir shah',Southafrica_players:'Hashim Amla',England_players:'Ben Strokes'},
{Indian_players:'RishabPanth',Australia_players:'Mitchel Marsh',Pakistan_players:'Imam-ul-haq',Southafrica_players:'chris morris',England_players:'Sam Billings'},
{Indian_players:'Ashwin',Australia_players:'Peter siddle',Pakistan_players:'Faheem Ashraf',Southafrica_players:'Aiden markram',England_players:'Eoin Morgan'},
{Indian_players:'Dinesh Karthik',Australia_players:'Tim Paine',Pakistan_players:'Shoib Malik',Southafrica_players:'Dean Elgar',England_players:'chris Woakes'},
You can do the following.
<tbody>
<tr *ngFor="let T of Teams; let i = index" [class.your-captain-css-class]="index===0">
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I've done the following.
getting the index along with object.
Adding class if index is 0.
This is cover your requirement. There is another way of doing it only by CSS.
You can do it with CSS by doing this
custom-class:first-child {
color: yellow;
font-size: 15px;
}
Also, you have an error in your sample an ending tr tag but no beginning tr tag inside the body
<tbody *ngFor="let T of Teams" >
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I believe after reading the comments you could/should do this instead and use the CSS at the top and it should all work the reason I suggest using the class instead of tr is because if you are using tr you have used tr more then once and it will affect all tr tags instead of just the one you want in the body.
<tbody>
<tr *ngFor="let T of Teams" class="custom-class">
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
Is there any way to clear or hide the contents of the first td, from the second td in a two column table, without any edit access to the actual td's?
So I'd like to hide the numbers in the table below
<table>
<tr>
<td>1.</td>
<td>Content</td>
</tr>
<tr>
<td>2.</td>
<td>More content</td>
</tr>
<tr>
<td>3.</td>
<td>Even more content</td>
</tr>
</table>
This is in a vendor-supplied application that spits out the coded page. The only access is the ability to add code in the Content section (second td in each row).
I've tried to use a div tag with some absolute positioning and just cover the first td with the second, but I could never get it to work consistently.
With CSS Selectors
If your page has only one table you could use CSS selectors. In your case you need to add a style that targets <td> tags that don't have a previous <td> sibling.
td {
/* hide the first td element */
display: none;
}
td + td {
/* display all td elements that have a previous td sibling */
display: block;
}
If you are only able to add content within the second <td> of each row then adding a whitespace stripped version of the above code within style tags to the first one will probably work, but could have messy side effects if there is more than one table on your page.
<table>
<tr>
<td>1.</td>
<td><style>td{display:none;}td+td{display:block;}</style>Content</td>
</tr>
<tr>
<td>2.</td>
<td>More content</td>
</tr>
<tr>
<td>3.</td>
<td>Even more content</td>
</tr>
</table>
With JavaScript
If you have more than one table on your page, try inserting an empty <div> with a unique ID into the first <td>'s content. Immediately after place a script that targets the closest <table> parent of that ID, from which you can extract the necessary <td>s to hide. Additionally, you need to make sure you only run the code once the page is loaded, otherwise it may not pick up any trs etc beyond where the script is implemented.
The easiest way to find the nearest parent that is <table> is by using closest but this isn't supported in Internet Explorer. This post has a good solution (parent only) that I'll use.
The complete script:
window.onload = function() {
function getClosest( el, tag ) {
tag = tag.toUpperCase();
do {
if ( el.nodeName === tag ) {
return el;
}
} while ( el = el.parentNode );
return null;
}
var table = getClosest( document.getElementById( 'unique-id' ), 'table' );
var trs = table.getElementsByTagName( 'tr' );
for ( var i = 0; i < trs.length; i++ ) {
trs[ i ].getElementsByTagName( 'td' )[ 0 ].style.display = 'none';
}
}
Including the <div> with a unique ID, stripping whitespace and adding the <script> tags, your table would look something like:
<table>
<tr>
<td>1.</td>
<td><div id="unique-id"></div><script>window.onload=function(){function getClosest(el,tag){tag=tag.toUpperCase();do{if(el.nodeName===tag){return el;}}while(el=el.parentNode);return null;}var table=getClosest(document.getElementById('unique-id'),'table'),trs = table.getElementsByTagName('tr');for(var i=0;i<trs.length;i++){trs[ i ].getElementsByTagName('td')[0].style.display='none';}}</script>Content</td>
</tr>
<tr>
<td>2.</td>
<td>More content</td>
</tr>
<tr>
<td>3.</td>
<td>Even more content</td>
</tr>
</table>
why Header1 and Header2 not exists in all page in print landscape
https://fiddle.jshell.net/6mvucked/
seems height header is limit. if more than a value to be not show in all page
why ?
ٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍٍ
Your javascript will append 100 rows to only those containers whose id is "test".
So if you want the same to happen with the tbody of header, then simply write
<tbody id="test">
in the one in the header.
But in that case, it will only print 100 rows for the header tbody and not the other second tbody, as Javascript will append 100 rows to the 1st tag with id="test".
So if you need to append 100 or x number of rows to both or many tbody, then give them separate ids and hence write separate functions for them in javascript.
Like this:
<table>
<teahd>
<tr>
<td>ok , no problem, but show only in first page and not repeat</td>
<td>
<table>
<tbody id="test-one">
<tr><td>header not be shown if this code(table) here</td></tr>
</tbody>
</table>
</td>
</tr>
</teahd>
<tbody id="test-two">
</tbody>
<tfoot>
<tr>
<td>no problem</td>
</tr>
</tfoot>
</table>
And the javascript functions like:
for(var i=1;i<=100; i++)
$('#test-one').append('<tr><td colspan="2">row '+i+'</td></tr>');
$('#test-two').append('<tr><td colspan="2">row '+i+'</td></tr>');
I am trying to select td.col_4 within the following HTML structure using Capybara, but to no avail so far:
<div id="potentialResults">
<div class="result">
<table class="report">
<tbody>
<tr>
<td class="col_1">
<img original-title="Sources : Telephone Directory">
<u>Name 1</u>
</td>
<td class="col_2"></td>
<td class="col_3"></td>
<td class="col_4">Address 1</td>
</tr>
</tbody>
</table>
</div>
<div class="result">
<table class="report">
<tbody>
<tr>
<td class="col_1">
<img original-title="Sources : Telephone Directory">
<u>Name 2</u>
</td>
<td class="col_2"></td>
<td class="col_3"></td>
<td class="col_4">Address 2</td>
</tr>
</tbody>
</table>
</div>
</div>
So at the moment to get the text address 1 for Name 1 I do this
page.find("#potentialResults > .result > .report > tbody > tr > td.col_1 > a", text: "Name 1", match: :first).find('td.col_4').text
But where I seem to be struggling is getting the same address but using the img data-attribute as my identifier
page.find("#potentialResults > .result > .report > tbody > tr > td.col_1 > img[original-title='Sources : Telephone Directory'] + td.col_4", match: :first).text
But td.col_4 isn't exactly adjacent in this example is it?
How else would I be able to get the text when stipulating that it has to be the first match?
The css you're passing to your finders is way too lengthy. It can be shortened without running into ambiguous results.
If you want to just simply get text from td.col_4, just do:
find('#potentialResults .col_4').text
If you want the address for 'Name 1', you need to first find that element, traverse up to the parent by a few levels, then find your way back down. This is because the elements you are looking for are siblings, and Capybara doesn't really provide an easy way to find these:
find('#potentialResults .col_1 a', :text => 'Name 1').find(:xpath, '../../..').find('.col_4').text
given a table
<table>
<tr class="sechead">...
<tr>...
<tr>...
<tr class="sechead">...
<tr>...
<tr>...
</table>
I have tried the following. I want it to alternate the colours for the rows coming after sechead.
table tr.sechead:nth-child(even) ~ tr{background-color:rgb(75,172,198);}
table tr.sechead:nth-child(odd) ~ tr{background-color:rgb(153,129,189);}
It color all the rows with the same color. Any possible solutions for this?
The problem is that all of the rows after the .sechead come after the first .sechead
If adjusting the HTML is okay, you could try this:
<table>
<tbody>
<tr class="sechead">...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody>
<tr class="sechead">...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
...
</table>
Then your style can be:
tbody > tr {background-color:rgb(75,175,198);}
tbody:nth-child(even) > tr {background-color:rgb(153,129,189);}
Note that I removed the "odd" selector, so that browsers that don't support nth-child still have a fallback defined.
If your sure you have only two <tr> tags after every class="sechead" . Then u can try this
<table>
<tr class="sechead"><td>Hello</td></tr>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
<tr class="sechead"><td>welcome</td></tr>
<tr><td>content4</td></tr>
<tr><td>content5</td></tr>
</table>
CSS
<style>
tr{width:50px;height:30px;}
table tr.sechead + tr{background-color:rgb(75,172,198);}
table tr.sechead + tr+tr{background-color:rgb(153,129,189);}
</style>