I am trying to set up a mouseover highlight effect for a round-robin style tournament so that when a person puts the mouse over player A's results against player B, that cell as well as the cell showing player B's results against player A are both highlighted. To illustrate the point, here is the page I would like to highlight: http://yppc.zzl.org/groups.html . I have yet to find a mouseover script that can highlight non-adjacent cells at the same time. I have seen this effect on another website, but unfortunately the league is not in session and the scores have been taken down.
Thanks for any assistance you can give!
Try something like this:
<html>
<head>
<script>
function hl(cell, enable)
{
var rIndex = cell.cellIndex;
var cIndex = cell.parentNode.rowIndex;
var cell2 = cell.parentNode.parentNode.rows[rIndex].cells[cIndex];
if (enable) {
cell.style.backgroundColor = '#000';
cell2.style.backgroundColor = '#000';
} else {
cell.style.backgroundColor = '#fff';
cell2.style.backgroundColor = '#fff';
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td></td>
<td onmouseover="hl(this, true)" onmouseout="hl(this, false)">A:B</td>
<td onmouseover="hl(this, true)" onmouseout="hl(this, false)">A:C</td>
</tr>
<tr>
<td>B</td>
<td onmouseover="hl(this, true)" onmouseout="hl(this, false)">B:A</td>
<td></td>
<td onmouseover="hl(this, true)" onmouseout="hl(this, false)">B:C</td>
</tr>
<tr>
<td>C</td>
<td onmouseover="hl(this, true)" onmouseout="hl(this, false)">C:A</td>
<td onmouseover="hl(this, true)" onmouseout="hl(this, false)">C:B</td>
<td></td>
</tr>
<table>
</body>
</html>
Related
I'm having trouble replicating this table. I'm confused with the rowspan and colspan. I would really appreciate it if someone helps.
Click here to view image of the table
Here you go:
<table>
<tr>
<td colspan="7">The Error Rate on Different Forms</td>
</tr>
<tr>
<td rowspan="2">Form name</td>
<td rowspan="2">A</td>
<td rowspan="2">B</td>
<td rowspan="2">Total Fields (X = A x B)</td>
<td rowspan="2">Fields with errors (Y)</td>
<td colspan="2">Error rate* (Y/X) x 100 (%)</td>
</tr>
<tr>
<td>X/Y</td>
<td>%age</td>
</tr>
<tr>
<td colspan="7">High Risk Errors</td>
</tr>
<!-- normal tr td -->
<tr>
<td colspan="7">Low Risk Error</td>
</tr>
<!-- normal tr td -->
</table>
I am trying to read the values from this screen( Sections appears dynamically it can be more than one). We have to read each field like Local Radios, MAC Address, Version from General Application Statistic and Default Geo Code from Legacy Configuration.. i got xapth to identify how many sections displayed. But unable to read the content under each section. i have to read them like key/value pair.. Due to the structure of html(Below) I am having tough time to write xpath between two section like ...General Application Statistics and Legacy Configuration
<table class="tabletext">
<tbody>
<tr>
<td style="font-weight:bold; font-size:large">Collector Information</td>
</tr>
</tbody>
</table>
<table class="tabletext">
<tbody>
<tr>
<td style="font-size:medium" colspan="2" align="left">
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td style="color:Navy; font-size:20px; border-bottom: solid 1px black; " width="700px">General Application Statistics</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-weight:bold; font-size:medium">Local Radios</td>
<td align="left">AA.5E.AZ.21.13.04[Z0136FBZ]</td>
</tr>
<tr>
<td style="font-weight:bold; font-size:medium">MAC Address</td>
<td align="left">91-99-99-0C-66-B2</td>
</tr>
<tr>
<td style="font-weight:bold; font-size:medium">Version</td>
<td align="left">14.48.24.0</td>
</tr>
<tr>
<td style="font-size:medium" colspan="2" align="left">
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td style="color:Navy; font-size:20px; border-bottom: solid 1px black; " width="700px">Legacy Configuration</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-weight:bold; font-size:medium">Default Geo Code</td>
<td align="left">AF.ZA.QE.23.23.1F</td>
</tr>
</tbody>
</table>
This is the xpath I am trying to fix.I am sure its buggy but can some one direct me how to resolve this..
//table[2]/tbody/tr[td/table/tbody/tr[2]/td[normalize-space(text())='Legacy Configuration']]/preceding-sibling::tr and following-sibling::tr[td/table/tbody/tr[2]/td[normalize-space(text())='General Application Statistics']]
To retrieve each field like Local Radios, MAC Address, Version from General Application Statistic and the field Default Geo Code from Legacy Configuration you can use the following code block :
List<WebElement> all_items1 = driver.findElements(By.xpath("//table[#class='tabletext']/tbody//tr//td//table//tbody//tr//td[contains(.,'General Application Statistics')]//following::td"));
List<String> properties = new ArrayList<String>(3);
List<String> values = new ArrayList<String>(3);
for (int i=0;i<all_items.size();i=i+2)
properties.add(all_items.get(i).getAttribute("innerHTML"));
for (int j=1;j<all_items.size();j=j+2)
values.add(all_items.get(j).getAttribute("innerHTML"));
for (int k=0;k<properties.size();k++)
System.out.println("Property " + properties.get(k) + " has a value of " + values.get(k));
List<WebElement> all_items2 = driver.findElements(By.xpath("//table[#class='tabletext']/tbody//tr//td//table//tbody//tr//td[contains(.,'Legacy Configuration')]//following::td"));
List<String> properties = new ArrayList<String>(1);
List<String> values = new ArrayList<String>(1);
for (int i=0;i<all_items.size();i=i+2)
properties.add(all_items.get(i).getAttribute("innerHTML"));
for (int j=1;j<all_items.size();j=j+2)
values.add(all_items.get(j).getAttribute("innerHTML"));
for (int k=0;k<properties.size();k++)
System.out.println("Property " + properties.get(k) + " has a value of " + values.get(k));
Since you have tagged Robot Framework, i'll give a robot specific solution here:
${legal_key}= Get Text xpath://td[text()='Local Radios']
${legal_value}= Get Text xpath://td[text()='Local Radios']/following-sibling::td
Similarly for all the other fields you want.
I need to select radion button with id="optProfile" in 7th tr using text "Internet Users" in td/font tag. I am using below code but it is not working and selecting radio button from 1st tr row. Can anyone help
<html>
<head>
<body onmousedown="infCheckMouseDown(event);" onkeydown="infCheckDownKey(event);" onbeforeunload="INFIEExit();" onload="INFsetInitialFocus();window_onload();CreateScriptingFrames();">
<form action="PEINFCommon.ASP?WCI=Genericcreen&WCE=GenericEvent" onsubmit="return false" name="Genericcreen" method="post">
<table class="TopLevelTable" align="center" width="100%" border="0">
<tbody>
<tr>
<td width="100%">
<table width="100%" border="0">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table width="98%" cellspacing="0" cellpadding="0" border="0" cols="1">
<tbody>
<tr align="center">
<td align="left">
<table width="100%">
<tbody>
<tr>
<tr>
<tr>
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<td width="5%">
<input id="optProfile" type="Radio" callfunction="" value="" onblur="ResetScript(this);return true;" onfocus="HighlightScript(this);" onclick="" name="" size="11">
<font class="fLabel"></font>
<br>
<input id="hidCurrentProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="N" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_CurrentProfileInd">
<input id="hidProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="RACINTER" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_ProfileCd">
</td>
<td>
<font class="">Internet Users</font>
</td>
</tr>
<tr height="">
<tr height="">
<tr height="">
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</frame>
<frame id="Script" scrolling="Yes" frameborder="0" noresize="">
</frameset>
</html>
you need to use ancestor instead of preceding:
//font[text()='Internet Users']/ancestor::tr[1]/td/input[#type='Radio']
and it's also a better practice to tell which one of the tr-ancestors you want -> [1] - since you want the first direct ancestor
Is there a reason why you are not using the id of the radio button?
WebElement wElement = wDriver.findElement(By.Id("optProfile"));
You can use the following XPath
//tr[.//font[text()='Internet Users']]//input[#id='optProfile']
This xpath looks for the tr containing the font tag with text "Internet Users" and then navigates to the input tag with id = 'optProfile'
You can use preceding as below-
By.xpath("//font[contains(text(),'Internet Users')]/preceding::input[#id='optProfile']")
Thanks everyone here for your help. I really appreciate it.Its working with below code
WebElement trs = GlobalVar.wDriver.findElement(By.xpath("//font[text()='Internet Users']/ancestor::tr[1]"));
trs.findElement(By.id("optProfile")).click();
I would try something like this
List<WebElement> trs = driver.findElements(By.cssSelector("table > tr"));
for (WebElement tr : trs)
{
List<WebElement> fonts = tr.findElements(By.tagName("font"));
if (!fonts.isEmpty() && fonts.get(0).getText().trim().equals("Internet Users"))
{
tr.findElement(By.id("optProfile")).click();
break;
}
}
You didn't show the TABLE tag in the HTML snippet so you will likely need to be more specific in the initial CSS selector. Basically this code loops through the TRs looking for "Internet Users" in the FONT tag. Once it finds it, it click the radio button with id=optProfile.
If you will post the TABLE tag in the HTML snippet I can help with the CSS selector.
Edit 1: changed the code to address the case where some TRs don't contain FONT tags.
I am trying to extract the table data stored within a KML file. There are hundreds of points in this file and each point has a table embedded in its 'description'. I need the data for each point in a format that can be put into a csv or excel file.
Each table is formatted with the same headers designated by the th tag and then the data is designated with the td tag. I have included a copy of the code below.
I am attempting this with BeautifulSoup and have attempted a few different iterations, but am still quite the beginner here. I just get a blank return each time. I'd like the final result to end up with a string of all of the data, but with each element from a single table separated with a ',' and in a row and then the next table starting on a new line.
node = soup.find_all('description')
header = node.find_all('th')
info = header.find_all('td')
<Placemark id="ID_00004">
<Snippet maxLines="0"></Snippet>
<description><![CDATA[<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;">
<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px">
<tr style="text-align:center;font-weight:bold;background:#9CBCE2">
<td> </td>
</tr>
<tr>
<td>
<table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px">
<tr>
<th>FID</th>
<td>4</td>
</tr>
<tr bgcolor="#D4E4F3">
<th>COLnum</th>
<td>14</td>
</tr>
<tr>
<th>Fieldnum</th>
<td></td>
</tr>
<tr bgcolor="#D4E4F3">
<th>Country</th>
<td>USA</td>
</tr>
<tr>
<th>State</th>
<td>Montana</td>
</tr>
<tr bgcolor="#D4E4F3">
<th>County</th>
<td>Dawson</td>
</tr>
<tr>
<th>Age</th>
<td>Upper Cretaceous</td>
</tr>
<tr>
<th>Stage</th>
<td></td>
</tr>
<tr bgcolor="#D4E4F3">
<th>AgeDate</th>
<td></td>
</tr>
<tr>
<th>Zone</th>
<td></td>
</tr>
<tr bgcolor="#D4E4F3">
<th>Map</th>
<td></td>
</tr>
<tr>
<tr>
<th>fauna</th>
<td></td>
</tr>
<tr bgcolor="#D4E4F3">
<th>Collector</th>
<td>C.A. White</td>
</tr>
<tr>
<th>Date</th>
<td>1882</td>
</tr>
<tr bgcolor="#D4E4F3">
<th>FaunaIndex</th>
<td></td>
</tr>
<tr>
<th>Reference</th>
<td>Monograph 32</td>
</tr>
<tr bgcolor="#D4E4F3">
<th>Comments</th>
<td></td>
</tr>
<tr>
<th>F22</th>
<td></td>
</tr>
<tr bgcolor="#D4E4F3">
<th>F23</th>
<td><Null></td>
</tr>
<tr>
<th>F24</th>
<td></td>
</tr>
<tr bgcolor="#D4E4F3">
<th>F25</th>
<td></td>
</tr>
<tr>
<th>F26</th>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>]]></description>
<styleUrl>#IconStyle00</styleUrl>
<Point>
<coordinates>-104.5651611501076,47.2247073758612,0</coordinates>
</Point>
</Placemark>
I have put together a Bootply demonstration here: http://www.bootply.com/Ss2aAnzqlZ.
It's a panel with a table as per http://getbootstrap.com/components/#panels-tables. However, I've also made the panel collapsible. The collapsing bit works OK, but the table itself doesn't retain shape. As you'll see in the Bootply, it doesn't fill the width of the panel when you first load the page. When you click "Improvements" in the panel header to collapse the panel, the table takes up the full panel width during the animation, then disappears. When you click again to show the panel content, the table is the full width until the animation stops, at which point, it shrinks back to what looks like an "auto" width.
Oddly enough, inspecting the table element shows that the table itself is full width, but the thead, tbody and tfoot aren't.
I've sort of tracked it down to the presence of the "collapse" class in the table. If you start the Bootply without the "collapse" class, it's full width until you collapse the panel. When you expand it, it goes back to auto width. I don't know why ... do you?
Here's the snippet, but the collapsing doesn't appear to run here. The Bootply is better.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
The collapse class toggles the display style on the table between none and block and this appears to be interfering with the standard table CSS.
You can resolve this by putting your table inside a div and setting that div to collapse rather than the table.
New Bootply: http://www.bootply.com/L8h2OdpMuD
HTML:
<div style="margin: 15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Alternatively, you can add the css:
table.collapse.in {
display: table;
}
Arguably this could be a patch to component-animations.less.