XPath to table cell (td) contents based upon label? - html

Can anyone help me to find the right XPath to retrieve the Average Win and Loss value (36.68 pips and -38.56 pips) from this web page:
https://www.myfxbook.com/members/babatrader/ic-markets-live/2595252
Here the portion of the HTML
<table class="maxWidth" cellspacing="0" id="trades">
<tbody><tr>
<td valign="top">
<table cellspacing="0" class="advanced border0L">
<tbody><tr class="bg1">
<td>Trades:</td>
<td class="alignR">2885</td>
</tr>
<tr>
<td>Profitability:</td>
<td align="right" class="pointer">
<span id="wonTip" class="Won 1619 out of 2885 trades, which represents 56%.<br/>Lost 1266 out of 2885 trades, which represents 44%."><div class="blockHolder">
<div class="greenBlock floatLeft" style="width:56px"></div>
<div class="redBlock floatLeft" style="width:44px"></div>
</div></span>
</td>
</tr>
<tr class="bg1">
<td>Pips:</td>
<td class="alignR">10571.7</td>
</tr>
<tr>
<td>Average Win:</td>
<td class="alignR">36.68 pips / €3.31</td>
</tr>
<tr class="bg1">
<td>Average Loss:</td>
<td class="alignR">-38.56 pips / -€3.56</td>
</tr>
<tr>
<td> Lots:</td>
<td class="alignR">38.94</td>
</tr>
<tr class="bg1">
<td>Commissions:</td>
<td class="alignR">-€226.56</td>
</tr>
</tbody></table>
</td>
<td valign="top">
<table cellspacing="0" class="advanced border0R border0L">
<tbody><tr>
<td>Longs Won:</td>
<td align="right">
<span class="gray">(687/1247) </span> 55%
</td>
</tr>
<tr class="bg1">
<td>Shorts Won:</td>
<td align="right">
<span class="gray">(932/1638) </span> 56%
</td>
</tr>
<tr>
<td>Best Trade(€):</td>
<td class="alignR"> <span class="gray">(Jul 20)</span> 17.93
</td>
</tr>
<tr class="bg1">
<td> Worst Trade(€):</td>
<td class="alignR"> <span class="gray">(Jul 19)</span> -32.08
</td>
</tr>
<tr>
<td>Best Trade (Pips):</td>
<td class="alignR"> <span class="gray">(Sep 07)</span> 177.5
</td>
</tr>
<tr class="bg1">
<td>Worst Trade (Pips):</td>
<td class="alignR"> <span class="gray">(Sep 06)</span> -190.0
</td>
</tr>
<tr>
<td>Avg. Trade Length:</td>
<td class="alignR">
22h 45m
</td>
</tr>
</tbody></table>
</td>
<td>
<table cellspacing="0" class="advanced border0R">
<tbody><tr class="bg1">
<td><span class="dotted" id="pfTip">Profit Factor:</span></td>
<td class="alignR">
1.19
</td>
</tr>
<tr>
<td><span class="dotted" id="sdTip">Standard Deviation:</span></td>
<td class="alignR">€4.30</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="sharpTip">Sharpe Ratio:</span></td>
<td class="alignR">
0.00
</td>
</tr>
<tr>
<td><span class="dotted" id="zTip">Z-Score (Probability):</span></td>
<td class="alignR">
-31.21 (99.99%)
</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="expTip">Expectancy:</span></td>
<td class="alignR">3.7 Pips / €0.30</td>
</tr>
<tr>
<td><span class="dotted" id="ahprTip">AHPR:</span></td>
<td class="alignR">0.01%</td>
</tr>
<tr class="bg1">
<td><span class="dotted" id="ghprTip">GHPR:</span></td>
<td class="alignR">0.01%</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I've tried without succeed: The below is the one I have tried it.
//*[#id="trades"]/tbody/tr/td[1]/table/tbody/tr[5]/td[2]
//*[#id="trades"]/tr/td[1]/table/tbody/tr[5]/td[2]
and many others.. ;-)

This XPath,
substring-before(//table[#id="trades"]
//td[.="Average Win:"]/following-sibling::td[1], " /")
will select
36.68 pips
as requested, and you should find it to be more robust than many alternatives. For example, the table structure can change substantially, and as long as the label and the relative positions of the two table cells remain the same, this XPath will continue to function.

i had to remove both "tbody"
//*[#id='trades']/tr/td/table/tr[4]/td[2]

Related

Show My Div on above another div

I have created a full calendar page in sales force. Now I would like to append a div when hover on an event. Iit is working but hidden div come below another event and I want to show it on all above.
eventMouseover: function(calEvent, domEvent) {
console.log(calEvent.id);
console.log(domEvent);
$(this).append('<div id="events-layer" style="background-color:white;z-index:99999; overflow-auto;background-repeat: no-repeat;background-position: center;position: absolute;">'+'<table class="tableContent" cellpadding="5"> <tr class="tablerow"> <td class="tablerdata">Event Detail:</td> <td class="tablerdata"> <button type="button" onclick="myFunction()">Delete</button> <button type="button">edit</button> </td> <td> </td> </tr> <tr class="tablerow"> <td class="tablerdata">Assigned To </td> <td class="MiddleCol">fffffffffffffffffff</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Subject</td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Start </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">End </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffffffffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Related To </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> <tr class="tablerow"> <td class="tablerdata">Name </td> <td class="MiddleCol">Griffin</td> <td class="MiddleCol">Griffin</td> </tr> </table>'+'</div>');
}
Try making the position of the containing element "relative"

Force an element to take exactly half of available height in print media

I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO

Columns not lining up HTML table

I have the following table in HTML, but the columns don't line up at all well, you can see it here:
http://purepremier.com/#/teams
Is there any reason why this might be?
<table class="league">
<thead>
<tr>
<th>Pos</th>
<th>Team</th>
<th>P</th>
<th>F</th>
<th>A</th>
<th>GD</th>
<th>Pts</th>
</tr>
</thead>
<tbody>
<td class="ng-binding">1</td>
<td class="teams">
<a href="#/teams/65" ng-click="hidePrefs()" class="ng-binding">
Manchester City
</a>
</td>
<td class="ng-binding">4</td>
<td class="ng-binding">10</td>
<td class="ng-binding">0</td>
<td class="ng-binding">10</td>
<td class="ng-binding">12</td>
</tr>
<tr ng-repeat="team in teamsList.standing" class="ng-scope">
<td class="ng-binding">2</td>
<td class="teams">
<a href="#/teams/354" ng-click="hidePrefs()" class="ng-binding">
Crystal Palace
</a>
</td>
<td class="ng-binding">4</td>
<td class="ng-binding">8</td>
<td class="ng-binding">5</td>
<td class="ng-binding">3</td>
<td class="ng-binding">9</td>
</tr>
............
</tbody>
</table>
The below should fix the issue
In app.css line 921 change the display:inline-block; to display:table-cell;
display:table-cell; is the default behaviour of the <td> element

Table inside a table

I've added a table inside a table.
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
But I want "TEST" values under col1 and numeric values under col2. Currently all values are shown under col1.
Edit - Actual Code
<tr>
<td colspan="10">
<table class='<%= "table"+count%>' style="display:none" border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<nested:iterate property="equipC" id="equipmentFormBean" indexId="ffIndex" >
<tr class='<%= "table"+count%> dataOff' style="display:none">
<td align="right" ><nested:write property="equipInitial" /> </td>
<td ><nested:write property="equipNum" /> </td>
</tr>
</nested:iterate>
</table>
</td>
</tr>
How to do it?
Use Google chrome...Your html code is right.On my PC I see the values are in COL2.
Use Forgot to use table heading heading tag "th"
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<th>col1 </th>
<th>col2</th>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
Your HTML code is correct. With the html provided by you it displayed the tables properly. You may please see it here # FIDDLE - http://jsfiddle.net/BRxKX/4986/
Problem could be with dynamic generation of tables and mostly around COLSPAN if at all its being used in your dynamic code.
Here is code that I tested (you can see this in - http://jsfiddle.net/BRxKX/4986/)
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

HTML: Unexpected double row using rowspan

I want to create a normal table. But I need to put two fields in one row.
So, I used rowspan and expected to have a two row table, but with a space of fourth.
But, it's showed in only one line.
I revised, and look for something wrong, but I dont unerstaing.
When I remove the rowspan, everything looks normal, but I need the rowspan.
Why is render in one row?
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
</tbody>
</table>
This is a picture of my app in action, and the reason of my question.
https://www.dropbox.com/s/1luaxgg4yesm8re/result.png
Replace the rowspans with colspans. For example:
<td colspan="2">
(...)
</td>
EDIT:
Still not 100% sure what you're trying to achieve but as far as I believe you might want to:
remove rowspan from all the td's that are meant to be two-rowed.
add and additional <tr></tr> after each tr and fill it with a number of tds equal to number of cells with rowspan.
I just had a similar problem, try adding an empty Row at the end of the missbehaving Row something like this:
<table class="table table-bordered">
<tbody>
<tr class="warning" >
<td rowspan="2" >100</td>
<td rowspan="2">87</td>
<td rowspan="2">FERNANDO RODRIGUEZ</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Monterrey </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/100" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
<tr class="warning" >
<td rowspan="2" >101</td>
<td rowspan="2">82</td>
<td rowspan="2">IVAN CORTES</td>
<td rowspan="2"></td>
<td rowspan="2">MARIANO ORTEGA SANCHEZ</td>
<td rowspan="2" > </td>
<td rowspan="2" > </td>
<td rowspan="2">
<span class="label label-info">
Importacion
Sencillo
</span>
</td>
<td rowspan="2"> Nissan Mexico </td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">
<a href="/TimsaLzc/web/app_dev.php/main/fleteDetalle/101" >
<button class="btn btn-success">Detalles</button>
</a>
</td>
</tr>
<tr /> <!--magic goes here-->
</tbody>
</table>
It worked for me :)