Beautifulsoup problem of scraping text in array - python-3.x

Data=
<div class="dojoxGridView" id="dojox_grid__View_1" role="presentation" style="width: 1900px; height: 721px; left: 1px; top: 0px;" widgetid="dojox_grid__View_1">
<input class="dojoxGridHiddenFocus" dojoattachpoint="hiddenFocusNode" role="presentation" type="checkbox"/>
<input class="dojoxGridHiddenFocus" role="presentation" type="checkbox"/>
<div class="dojoxGridScrollbox" dojoattachpoint="scrollboxNode" role="presentation" style="height: 721px;">
<div class="dojoxGridContent" dojoattachpoint="contentNode" hidefocus="hidefocus" role="presentation" style="height: 504px; width: 1900px;">
<div role="presentation" style="position: absolute; left: 0px; top: 0px;">
<div aria-selected="false" class="dojoxGridRow" role="row" style="">
<table border="0" cellpadding="0" cellspacing="0" class="dojoxGridRowTable" role="presentation" style="width: 1900px;">
<tbody>
<tr>
<td class="dojoxGridCell" idx="0" role="gridcell" style="display:none;width:100px;" tabindex="-1">
78126
</td>
<td class="dojoxGridCell" idx="1" role="gridcell" style="width:10%;" tabindex="-1">
Approved Plan
</td>
<td class="dojoxGridCell" idx="2" role="gridcell" style="width:10%;" tabindex="-1">
G-10
</td>
<td class="dojoxGridCell" idx="3" role="gridcell" style="width:40%;" tabindex="-1">
ROOF PLAN
</td>
</tr>
</tbody>
</table>
</div>
Input=
source = driver.page_source
soup = BeautifulSoup(source, "lxml")
print(soup. prettify())
for article in soup.find_all('div', class_='dojoxGridContent'):
drawing_no = article.find_all('td', class_='dojoxGridCell', idx='3')
# ->need one more line to extract text
print(""drawing_no")
Output=
<td class="dojoxGridCell" idx="3" role="gridcell" style="width:40%;" tabindex="-1">ROOF PLAN</td> ...
I just want to extract "ROOF PLAN" how should I edit my code?
I tried drawing_no.text and drawing_no.value but it said "no attribute".
Thanks for your help!

try followig code
source="""<div class="dojoxGridView" id="dojox_grid__View_1" role="presentation" style="width: 1900px; height: 721px; left: 1px; top: 0px;" widgetid="dojox_grid__View_1">
<input class="dojoxGridHiddenFocus" dojoattachpoint="hiddenFocusNode" role="presentation" type="checkbox"/>
<input class="dojoxGridHiddenFocus" role="presentation" type="checkbox"/>
<div class="dojoxGridScrollbox" dojoattachpoint="scrollboxNode" role="presentation" style="height: 721px;">
<div class="dojoxGridContent" dojoattachpoint="contentNode" hidefocus="hidefocus" role="presentation" style="height: 504px; width: 1900px;">
<div role="presentation" style="position: absolute; left: 0px; top: 0px;">
<div aria-selected="false" class="dojoxGridRow" role="row" style="">
<table border="0" cellpadding="0" cellspacing="0" class="dojoxGridRowTable" role="presentation" style="width: 1900px;">
<tbody>
<tr>
<td class="dojoxGridCell" idx="0" role="gridcell" style="display:none;width:100px;" tabindex="-1">
78126
</td>
<td class="dojoxGridCell" idx="1" role="gridcell" style="width:10%;" tabindex="-1">
Approved Plan
</td>
<td class="dojoxGridCell" idx="2" role="gridcell" style="width:10%;" tabindex="-1">
G-10
</td>
<td class="dojoxGridCell" idx="3" role="gridcell" style="width:40%;" tabindex="-1">
ROOF PLAN
</td>
</tr>
</tbody>
</table>
</div>"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(source,"html.parser")
for article in soup.find_all('div', class_='dojoxGridContent'):
drawing_no = article.find('td', class_='dojoxGridCell', idx='3')
if drawing_no:
print(drawing_no.get_text())

please try below code. But in general if you pass in idx=3 it will only return one single element. If you want to extract text from multiple element you might want to use a more general identifier.
import lxml
from lxml import html
html_string = """
<div class="dojoxGridView" id="dojox_grid__View_1" role="presentation" style="width: 1900px; height: 721px; left: 1px; top: 0px;" widgetid="dojox_grid__View_1">
<input class="dojoxGridHiddenFocus" dojoattachpoint="hiddenFocusNode" role="presentation" type="checkbox"/>
<input class="dojoxGridHiddenFocus" role="presentation" type="checkbox"/>
<div class="dojoxGridScrollbox" dojoattachpoint="scrollboxNode" role="presentation" style="height: 721px;">
<div class="dojoxGridContent" dojoattachpoint="contentNode" hidefocus="hidefocus" role="presentation" style="height: 504px; width: 1900px;">
<div role="presentation" style="position: absolute; left: 0px; top: 0px;">
<div aria-selected="false" class="dojoxGridRow" role="row" style="">
<table border="0" cellpadding="0" cellspacing="0" class="dojoxGridRowTable" role="presentation" style="width: 1900px;">
<tbody>
<tr>
<td class="dojoxGridCell" idx="0" role="gridcell" style="display:none;width:100px;" tabindex="-1">
78126
</td>
<td class="dojoxGridCell" idx="1" role="gridcell" style="width:10%;" tabindex="-1">
Approved Plan
</td>
<td class="dojoxGridCell" idx="2" role="gridcell" style="width:10%;" tabindex="-1">
G-10
</td>
<td class="dojoxGridCell" idx="3" role="gridcell" style="width:40%;" tabindex="-1">
ROOF PLAN
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
"""
tree = html.fromstring(html_string)
ROOFPLAN = tree.xpath('//tbody/tr//td[#idx="3"]/text()')
print(''.join(ROOFPLAN).strip())

You can use the idx attribute and select by its value
print(soup.select_one("[idx='3']").text.strip())

Related

Selecting Date from the Datepicker. How do I do that using WATIR

I don't know how to select the date from the date picker, For an example, If I want to select 1/5/2022, how would I do that?
here is the pic
Here is the Html
<div style="visibility: visible; overflow: visible; left: 589px; top: 193px; position: absolute;"
class="gwt-PopupPanel">
<div class="popupContent">
<table class="gwt-DatePicker" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="vertical-align: top;" align="left">
<table class="datePickerMonthSelector">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td width="1">
<div tabindex="0" class="datePickerPreviousButton" role="button" aria-pressed="false">
<input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">«</div>
</div>
</td>
<td width="1">
<div tabindex="0" class="datePickerPreviousButton" role="button" aria-pressed="false">
<input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">‹</div>
</div>
</td>
<td class="datePickerMonth" width="100%">Nov 2022</td>
<td width="1">
<div tabindex="0" class="datePickerNextButton datePickerNextButton-up" role="button"
aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">›</div>
</div>
</td>
<td width="1">
<div tabindex="0" class="datePickerNextButton datePickerNextButton-up" role="button"
aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true"
style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="html-face">»</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;" align="left">
<table class="datePickerDays" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td class="datePickerWeekendLabel">S</td>
<td class="datePickerWeekdayLabel">M</td>
<td class="datePickerWeekdayLabel">T</td>
<td class="datePickerWeekdayLabel">W</td>
<td class="datePickerWeekdayLabel">T</td>
<td class="datePickerWeekdayLabel">F</td>
<td class="datePickerWeekendLabel">S</td>
</tr>
<tr>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">30
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
31
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">1</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">2</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">3</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">4</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
5
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
6
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">7</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">8</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">9</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">10</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">11</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
12
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
13
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">14</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">15</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">16</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">17</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">18</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
19
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
20
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">21</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">22</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">23</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">24</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">25</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
26
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay datePickerDayIsWeekend ">
27
</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">28</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">29</div>
</td>
<td>
<div tabindex="0" aria-selected="false" class="datePickerDay ">30</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
1
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
2
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">3
</div>
</td>
</tr>
<tr>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">4
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
5
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
6
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
7
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
8
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false" class="datePickerDay datePickerDayIsFiller ">
9
</div>
</td>
<td>
<div tabindex="-1" aria-selected="false"
class="datePickerDay datePickerDayIsWeekend datePickerDayIsFiller ">10
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
The general approach needs to be:
Use the month previous/next buttons to select the month/year
Click the specific day (making sure to ignore the days for the previous/next month)
The code would look like:
# The day you would like to pick
target_date = Time.parse('1/5/2022')
# Pick the month/year (by determining how many months in the past/future you need to go)
current_date = Time.parse(browser.td(class: 'datePickerMonth').text)
months_to_increment = (target_date.year * 12 + target_date.month) - (current_date.year * 12 + current_date.month) # From https://stackoverflow.com/a/9428676/1200545
months_to_increment.abs.times do
if months_to_increment > 0
browser.div(class: 'datePickerNextButton', index: 0).click
else
browser.div(class: 'datePickerPreviousButton', index: 1).click
end
end
# Pick the day (ignoring the datePickerDayIsFiller divs as they are the previous/next month)
browser.div(text: target_date.day.to_s, class: ['datePickerDay', '!datePickerDayIsFiller']).click

How to get only rely content(black color) and not included quote(blue color) content using Selenium and Python

I want to know what to get some content not include quote content.
The following url is the target webpage:
https://forumd.hkgolden.com/view.aspx?type=BW&message=7219211
I must use a full xpath to get their content. I want to get black color content and I don't want to get blue content, but when I use the following code. I got blue and blank content together.
content = driver_blank.find_element_by_xpath('/html/body/form/div[5]/div/div/div[2]/div[1]/div[5]/table[8]/tbody/tr/td/table/tbody/tr/td[2]/table/tbody/tr[1]/td/div')
print(content.text)
The following is their html code:
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom: 7px;">
<tbody>
<tr>
<td align="left">
<table class="repliers">
<tbody>
<tr hc7uwnfktbez9="" id="XoBTa" userid="461194" username="浅川梨奈">
<td class="repliers_left" style="background-color: #F3F2F1;">
<div>
<a name="275220714"></a>
<a href="javascript: ToggleUserDetail(6, 'XoBTa');" style="font-weight: bold; color: #FF0066;">
浅川梨奈
</a>
<br>
<br>
<div id="ThreadUser6" style="position: relative;">
<a href="/ProfilePage.aspx?userid=461194" style="text-decoration: none;">
<img src="/icons/97.gif" style="border-width: 0px;" alt="Logo">
</a>
<br>
<br>
<img src="/labels/4.gif" style="border-width: 0px;" alt="Member">
</div>
</div>
</td>
<td style="background-color: #F3F2F1; height: 100%; border: solid 1px #111111; vertical-align: top;">
<table class="repliers_right" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<div class="ContentGrid">
<blockquote><div style="color: #0000A0;">有冇第隻款<img data-icons=":-[lm" src="/faces/lomore/angry.gif" alt=":-[lm"> <img data-icons=":-(lm" src="/faces/lomore/frown.gif" alt=":-(lm"> 我想要呢兩隻</div></blockquote>
<br>
係囉,反應好既會唔會考慮出其他?
<br>
我都想要其他
<img data-icons="^3^lm" src="/faces/lomore/kiss.gif" alt="^3^lm">
<img data-icons="[bomb]lm" src="/faces/lomore/bomb.gif" alt="[bomb]lm">
<br><br><br>
</div>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top;">
<div id="lineImage6" style="display: block; overflow: hidden;">
</div>
</td>
</tr>
<tr>
<td style="width: 100%; text-align: right;">
<div style="float: right; vertical-align: bottom; margin-top: 5px;">
<div id="lauming6" style="float: left; vertical-align: bottom;"></div>
<a class="btn btn_small btn_bookmark" href="Javascript:bookmarkThis(7219211)" id="laumingHref">留名</a>
<a class="btn btn_small btn_complain" href="contactus.aspx?messageid=7219211&replyid=275220714">投訴文章</a>
<a class="btn btn_small btn_quote" href="Javascript:QuoteReply(7219211,275220714);">快速引用</a>
<a class="btn btn_small btn_quote" href="post.aspx?mt=Y&rid=275220714&id=7219211&page=2">引用原文</a>
<span style="font-size: 12px; color:gray;">
15/4/2020 13:18
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I hope to use start-to, not, or contains instruction to finish it.
Can anyone help me? Thanks~~~

How to get the text from this element?

I use selenium webdriver with node js.
I cannot get the text from this site. I need the "In progress" text.
I don't want to use absolute xpath, because I want use the code in other tests.
Thank you. :)
<div class="issuePanelContainer" id="issue_actions_container"
style="height: auto;">
<table cellpadding="0" cellspacing="0" border="0" width="100%"> .
</table>
<div class="issue-data-block">
<div class="actionContainer">
<div class="action-details">
<span class="aui-avatar aui-avatar-xsmall">
<span class="aui-avatar-inner">
<img alt="" src="https://jira.au.flitech.net/secure/useravatar?size=xsmall&ownerId=jan.plzak%40flightcentre.co.uk&avatarId=12582">
</span>
</span>
<a class="user-hover" rel="jan.plzak#flightcentre.co.uk" id="email_jan.plzak#flightcentre.co.uk" href="/secure/ViewProfile.jspa?name=jan.plzak%40flightcentre.co.uk">Jan Plzak</a>
made transition
- <span class="date" title="18/Jun/19 4:57 PM"><time class="livestamp" datetime="2019-06-18T16:57:08+1000">18/Jun/19 4:57 PM</time></span>
</div>
<div class="changehistory action-body">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody><tr>
<td width="60%">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody><tr>
<td width="47%" align="right">
<span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-blue-gray jira-issue-status-lozenge-new jira-issue-status-lozenge-max-width-medium" data-tooltip="<span class="jira-issue-status-tooltip-title">Open</span>" title="" original-title="">Open</span> </td>
<td align="center" nowrap="nowrap" width="6%">
<img src="/images/icons/arrow_right_small.gif" align="absmiddle" border="0" height="16" width="16">
</td>
<td width="47%">
<span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-yellow jira-issue-status-lozenge-indeterminate jira-issue-status-lozenge-max-width-medium" data-tooltip="<span class="jira-issue-status-tooltip-title">In Progress</span><br><span class="jira-issue-status-tooltip-desc">The development task is currently in progress</span>" title="" original-title="">In Progress</span></td>
</tr>
</tbody></table>
</td>
<td width="20%">
13d 21h 18m
</td>
<td width="20%" align="center">
1
</td>
</tr>
</tbody></table>
</div>
List<WebElement> list=driver.findElement(By.xpath("//span[contains(#class,'status')]"));
for(WebElement li:list)
{
if(li.getText().equals("In progress")
{
li.click(); // or assert or whatever
}
}
This is my answer, which is working fine, and content free. :)
driver.findElements(By.xpath('//div[#class="changehistory action-body"]/table/tbody/tr/td/table/tbody/tr/td[1]/span'));

How to Scroll and Select/Doubleclick a listbox item?

I'm trying to get Intranet-web reports using VBA-Excel. How can I scroll to the item in a list and select or double-click it?
I located the item using ID of its parent-element and its own class and innertext values. I tried .click method in many ways, but without success.
Sub VBA_IE()
Dim IE As New SHDocVw.InternetExplorerMedium
Dim HTMLDoc As MSHTML.HTMLDocument
Dim HTMLDiv As MSHTML.IHTMLElement
Dim HTMLDivs As MSHTML.IHTMLElementCollection
'
'Here is IE object set and the page loaded
'
Set HTMLDoc = IE.document
Set HTMLDivs = HTMLDoc.getElementById "id_mstr104ListContainer").getElementsByTagName("div")
For Each HTMLDiv In HTMLDivs
If HTMLDiv.getAttribute("title") = "Fourth Center" Then
HTMLDiv.Focus
HTMLDiv.click
'wait-routines
Application.Wait Now + TimeValue("00:00:05")
Exit For
Else
End If
Next HTMLDiv
IE.Quit
Set IE = Nothing
End Sub
Part of page's source (extended on Feb 20 2019):
<div style="display: block;" class="mstrPromptQuestion" id="id_mstr80">
<span class="">
<div class="mstrPromptQuestionTitleBar">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="middle">
<span class="mstrPromptQuestionTitleBarIndex" style="display: inline;">1.</span>
<span class="mstrPromptQuestionTitleBarTitle">Delivery Source</span>
<span class="mstrPromptQuestionTitleBarRequired" title="(Required)">(Required)</span>
</td>
<td width="1%" align="right" valign="middle">
<img src="../images/1ptrans.gif" align="absmiddle" style="display: none" class="mstrPromptQuestionBackToTopImg" title="Back to top" onclick="mstr.behaviors.PromptQuestion.onClickBackToTop('id_mstr80')">
</td>
</tr>
</tbody>
</table>
</div>
<table cellspacing="0" cellpadding="0" class="mstrPromptQuestionInfoTable">
<tbody>
<tr>
<td class="mstrPromptQuestionInfoCellLeft">
<div class="mstrPromptQuestionMeaning" style="display: block;">Select items for Delivery Source</div>
<div class="mstrPromptQuestionInstructions" style="display: none;"></div>
<div class="mstrPromptQuestionMessage" style="display: none;"></div>
</td>
<td class="mstrPromptQuestionInfoCellRight">
<span class="mstrPlaceholder" name="saveAnswerView" id="id_mstr81"></span>
</td>
</tr>
</tbody>
</table>
<div class="mstrPromptQuestionContents">
<table cellspacing="0" cellpadding="0" class="mstrPromptQuestionSimpleAnswerViewTitle" style="display: none;">
<tbody>
<tr>
<td class="mstrPromptQuestionSimpleAnswerViewTitleCellRadio">
<input value="0" name="id_mstr80_radio" onmousedown="mstr.behaviors.PromptQuestion.onClickRadio('id_mstr80', false)" id="id_mstr80_radio_simpleAnswerView" type="radio" checked="true">
</td>
<td class="mstrPromptQuestionSimpleAnswerViewTitleCellText">
<label for="id_mstr80_radio_simpleAnswerView">Your selection:</label>
</td>
</tr>
</tbody>
</table>
<div style="padding-left: 0px;" class="mstrPromptQuestionSimpleAnswerView" onmousedown="this.previousSibling.rows[0].cells[0].childNodes[0].checked = true; mstr.behaviors.PromptQuestion.onClickRadio('id_mstr80', false)">
<table cellspacing="0" style="display: table;" cellpadding="0" class="mstrListCart" id="id_mstr84">
<colgroup><col class="mstrListCartLeftCol"><col class="mstrListCartButtonCol"><col class="mstrListCartRightCol"><col class="mstrListCartButtonCol"></colgroup>
<tbody>
<tr>
<td class="mstrListCartRowPathView" style="width:100%;" colspan="4">
<table cellspacing="0" cellpadding="0" class="mstrListCartTablePathView" style="display: none;">
<tbody>
<tr>
<td class="mstrListCartCellPathView">
<span class="mstrPlaceholder" name="pathView" id="id_mstr87"></span>
</td>
<td class="mstrListCartCellPathUpButton">
<span class="mstrPlaceholder" name="pathUpButton" id="id_mstr88"></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mstrListCartCellSearchView" style="width:100%;" colspan="4">
<div title="" class="mstrSearchField" id="id_mstr99" style="display: block;">
<table cellspacing="0" cellpadding="0" class="mstrSearchFieldTable">
<tbody>
<tr>
<td class="mstrSearchFieldSearchBox">
<div title="" class="mstrTextBoxWithIcon" id="id_mstr102" style="display: block;">
<div class="mstrTextBoxWithIconCaption">
<label for="id_mstr102_txt">Search for:</label>
</div>
<table cellspacing="0" cellpadding="0" class="mstrTextBoxWithIconTable">
<tbody>
<tr>
<td class="mstrTextBoxWithIconCellInput">
<div>
<input maxlength="" onclick="if (mstr.utils.ISW3C) {this.focus();}" onkeypress="return mstr.behaviors.TextBoxWithIcon.onkeypress(arguments[0], self, 'id_mstr102', this.value)" name="id_mstr102_txt" style="background-color: rgb(255, 255, 255);" id="id_mstr102_txt" size="" type="text">
</div>
</td>
<td class="mstrTextBoxWithIconCellIcon">
<div class="mstrToolButtonRoundedRight">
<input type="button" title="Search" onmouseout="mstr.behaviors.ToolButtonRounded.unhover(this.parentNode)" style="background-position: left center; cursor: pointer;" class="mstrBGIcon_tbSearch" src="../images/1ptrans.gif" onmouseover="mstr.behaviors.ToolButtonRounded.hover(this.parentNode)" onclick="mstr.behaviors.TextBoxWithIcon.fire('id_mstr102', this.parentNode.parentNode.previousSibling.childNodes[0].childNodes[0].value);return false;">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="mstrSearchFieldMatchCaseBox">
<div class="mstrCheckBox" style="display: block;" id="id_mstr103">
<input type="checkbox" id="id_mstr103_input" onclick="mstr.$obj('id_mstr103').getModel() && mstr.$obj('id_mstr103').getModel().set('searchMatchCase', this.checked); mstr.$obj('id_mstr103').fireCommands(null, this.checked);">
<label title="" for="id_mstr103_input">Match case</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="mstrListCartCellAvailableView">
<table cellspacing="0" cellpadding="0" style="table-layout: auto; width: 100%;">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" title="" class="mstrListBlock" id="id_mstr104" style="display: table; width: 100%;">
<tbody>
<tr>
<td class="mstrListBlockCell">
<span class="">
<div class="mstrListBlockCaption" style="display: block;">Available:</div>
<div class="mstrListBlockHeader" style="display: none">
<span class="mstrPlaceholder" name="headerView" id="id_mstr105"></span>
</div>
<div style="width: auto; height: 150px;" class="mstrListBlockContents" id="ListBlockContents_id_mstr104">
<div oncontextmenu="return mstr.behaviors.Generic.oncontextmenu(arguments[0], self, 'id_mstr104');" onmouseup="try{mstr.$obj('id_mstr104').focus();}catch(localerr){}; return mstr.behaviors.Generic.clearBrowserHighlights(self)" onmousedown="var retVal = mstr.behaviors.ListView.onmousedown(arguments[0], self, 'id_mstr104'); try{mstr.$obj('id_mstr104').focus();}catch(localerr){}; return retVal" ondblclick="return mstr.behaviors.ListView.ondblclick(arguments[0], self, 'id_mstr104')" class="mstrListBlockListContainer" id="id_mstr104ListContainer" style="display: block; height: 80px;">
<div class="mstrListBlockItemSelected" title="First Center">
<div class="mstrBGIcon_ae mstrListBlockItemName" style="background-position: 2px 50%; padding-left: 23px;">First</div>
</div>
<div class="mstrListBlockItem" title="Second Center">
<div class="mstrBGIcon_ae mstrListBlockItemName" style="background-position: 2px 50%; padding-left: 23px;">Second Center</div>
</div>
<div class="mstrListBlockItem" title="Third Added Center">
<div class="mstrBGIcon_ae mstrListBlockItemName" style="background-position: 2px 50%; padding-left: 23px;">Third Added Center</div>
</div>
<div class="mstrListBlockItem" title="Fourth Center">
<div class="mstrBGIcon_ae mstrListBlockItemName" style="background-position: 2px 50%; padding-left: 23px;">Fourth Center</div>
</div>
</div>
<div class="mstrListBlockReadyState" style="display: none;"></div>
<div class="mstrListBlockMessageSection" style="display: none;">
<div class="mstrListBlockMessage"></div>
</div>
</div>
<a title="" href="#" onkeydown="return mstr.$obj('id_mstr104').onkeydown(arguments[0], self);" onkeypress="return mstr.$obj('id_mstr104').onkeypress(arguments[0], self);" class="mstrListBlockTabStop" id="id_mstr104TabStop">
<div></div>
</a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td class="mstrListCartCellAddRemoveButtons">
<div>
<div class="mstrToolButtonRounded" id="id_mstr106" style="display: block;">
<img title="Add" onmouseout="mstr.behaviors.ToolButtonRounded.unhover(this.parentNode)" style="background-position: left center; cursor: pointer;" class="mstrBGIcon_tbAdd" src="../images/1ptrans.gif" onmouseover="mstr.behaviors.ToolButtonRounded.hover(this.parentNode)" align="absmiddle" onclick="var v = mstr.$obj('id_mstr106'); return (v.get('enabled')) ? mstr.$obj('id_mstr106').fireCommands() : false;">
</div>
</div>
<div>
<div class="mstrToolButtonRounded" id="id_mstr107" style="display: block;">
<img title="Add All" onmouseout="mstr.behaviors.ToolButtonRounded.unhover(this.parentNode)" style="background-position: left center; cursor: pointer;" class="mstrBGIcon_tbAddAll" src="../images/1ptrans.gif" onmouseover="mstr.behaviors.ToolButtonRounded.hover(this.parentNode)" align="absmiddle" onclick="var v = mstr.$obj('id_mstr107'); return (v.get('enabled')) ? mstr.$obj('id_mstr107').fireCommands() : false;">
</div>
</div>
<div style="height: 11px; width: 1px; overflow: hidden"></div>
<div>
<div class="mstrToolButtonRounded" id="id_mstr108" style="display: block; background-position: left center;">
<img title="Remove" onmouseout="mstr.behaviors.ToolButtonRounded.unhover(this.parentNode)" style="background-position: right center; cursor: default;" class="mstrBGIcon_tbRemove" src="../images/1ptrans.gif" onmouseover="mstr.behaviors.ToolButtonRounded.hover(this.parentNode)" align="absmiddle" onclick="var v = mstr.$obj('id_mstr108'); return (v.get('enabled')) ? mstr.$obj('id_mstr108').fireCommands() : false;">
</div>
</div>
<div>
<div class="mstrToolButtonRounded" id="id_mstr109" style="display: block; background-position: left center;">
<img title="Remove All" onmouseout="mstr.behaviors.ToolButtonRounded.unhover(this.parentNode)" style="background-position: right center; cursor: default;" class="mstrBGIcon_tbRemoveAll" src="../images/1ptrans.gif" onmouseover="mstr.behaviors.ToolButtonRounded.hover(this.parentNode)" align="absmiddle" onclick="var v = mstr.$obj('id_mstr109'); return (v.get('enabled')) ? mstr.$obj('id_mstr109').fireCommands() : false;">
</div>
</div>
</td>
<td class="mstrListCartCellSelectedView">
<table cellspacing="0" cellpadding="0" style="table-layout: auto; width: 100%;">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" title="" class="mstrListBlock" id="id_mstr110" style="display: table; width: 100%;">
<tbody>
<tr>
<td class="mstrListBlockCell"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<span class="">
<div class="mstrListBlockCaption" style="display: block;">Selected:</div>
<div class="mstrListBlockHeader" style="display: none">
<span class="mstrPlaceholder" name="headerView" id="id_mstr111"></span>
</div>
<div style="width: auto; height: 150px;" class="mstrListBlockContents" id="ListBlockContents_id_mstr110">
<div oncontextmenu="return mstr.behaviors.Generic.oncontextmenu(arguments[0], self, 'id_mstr110');" onmouseup="try{mstr.$obj('id_mstr110').focus();}catch(localerr){}; return mstr.behaviors.Generic.clearBrowserHighlights(self)" onmousedown="var retVal = mstr.behaviors.ListView.onmousedown(arguments[0], self, 'id_mstr110'); try{mstr.$obj('id_mstr110').focus();}catch(localerr){}; return retVal" ondblclick="return mstr.behaviors.ListView.ondblclick(arguments[0], self, 'id_mstr110')" class="mstrListBlockListContainer" id="id_mstr110ListContainer" style="display: none; height: auto;"></div>
<div class="mstrListBlockReadyState" style="display: none;"></div>
<div class="mstrListBlockMessageSection" style="display: block;">
<div class="mstrListBlockMessage">(none)</div>
</div>
</div>
<a title="" href="#" onkeydown="return mstr.$obj('id_mstr110').onkeydown(arguments[0], self);" onkeypress="return mstr.$obj('id_mstr110').onkeypress(arguments[0], self);" class="mstrListBlockTabStop" id="id_mstr110TabStop">
<div></div>
</a>
</span>
</td>
<td class="mstrListCartCellUpDownButtons">
<span class="mstrPlaceholder" name="upButton" id="id_mstr96"></span>
<span class="mstrPlaceholder" name="downButton" id="id_mstr97"></span>
</td>
</tr>
<tr>
<td class="mstrListCartCellFetchView" colspan="4">
<table title="" cellspacing="0" style="display: table;" cellpadding="0" class="mstrFetchControl" id="id_mstr112">
<tbody>
<tr>
<td>
<img title="First page" src="../images/1ptrans.gif" align="absmiddle" onclick="mstr.behaviors.FetchControl.fireFetchCommand('id_mstr112', 'FetchFirst')" class="mstrBGIcon_fetchFirstDisabled " style="display: none;">
</td>
<td>
<img title="Previous Page" src="../images/1ptrans.gif" align="absmiddle" onclick="mstr.behaviors.FetchControl.fireFetchCommand('id_mstr112', 'FetchPrevious')" class="mstrBGIcon_fetchPreviousDisabled " style="display: none;">
</td>
<td class="mstrFetchControlCellText">
<div onmouseout="this.className = this.className.replace(/Hover/,'')" onmousedown="mstr.behaviors.FetchControl.on_mousedown('id_mstr112')" class="mstrFetchControlText" onmouseover="if (!this.disabled) this.className += 'Hover'">1 - 4 of 4</div>
</td>
<td>
<img title="Next page" src="../images/1ptrans.gif" align="absmiddle" onclick="mstr.behaviors.FetchControl.fireFetchCommand('id_mstr112', 'FetchNext')" class="mstrBGIcon_fetchNextDisabled " style="display: none;">
</td>
<td>
<img title="Last page" src="../images/1ptrans.gif" align="absmiddle" onclick="mstr.behaviors.FetchControl.fireFetchCommand('id_mstr112', 'FetchLast')" class="mstrBGIcon_fetchLastDisabled " style="display: none;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<table cellspacing="0" cellpadding="0" class="mstrPromptQuestionComplexAnswerViewTitle" style="display: none;">
<tbody>
<tr>
<td class="mstrPromptQuestionComplexAnswerViewTitleCellRadio">
<input value="1" name="id_mstr80_radio" onmousedown="mstr.behaviors.PromptQuestion.onClickRadio('id_mstr80', true)" id="id_mstr80_radio_complexAnswerView" type="radio">
</td>
<td class="mstrPromptQuestionComplexAnswerViewTitleCellText">
<label for="id_mstr80_radio_complexAnswerView">The default selection is:</label>
</td>
</tr>
</tbody>
</table>
<div style="padding-left: 23px; display: none;" class="mstrPromptQuestionComplexAnswerView" onmousedown="this.previousSibling.rows[0].cells[0].childNodes[0].checked = true; mstr.behaviors.PromptQuestion.onClickRadio('id_mstr80', true)">
<div title="" class="mstrTextDiv" style="display: block;" id="id_mstr113">
<div class="mstrTextDivCaption"></div>
<div class="mstrTextDivValue"></div>
</div>
</div>
</div>
</span>
</div>
VBA-code just passes through the command line like nothing happened, or reports an error that the method is not applicable to the element.
Looks like you will need events to be fired but here are two things to try
ie.document.parentWindow.execScript "document.querySelector('[title^=Fourth]').setAttribute('class','mstrListBlockItemSelected');"
And
ie.document.querySelector("[title='Fourth Center']").FireEvent "ondblclick"

Styles in vaadin not fine in Table inside Liferay Theme

We are using Vaadin 7.3.10 and we are developing a porlet 2.0 in eclipse. This porlet is deploying in Liferay 6.2-CE-ga3. We create a Liferay Theme (we extend of classic parent theme) and in this Theme we include the Vaadin Valo Theme.
The problem is (ONLY IN FIREFOX) when we show one table and the heather td have a different size of the several rows td.
This is the HTML code generated in Vaadin:
<div id="yui_patched_v3_11_0_1_1423812986764_751" class="v-slot v-slot-tablaNueva">
<div id="yui_patched_v3_11_0_1_1423812986764_750" style="width: 712px; height: 230px;" class="v-table v-widget v-has-width v-has-height tablaNueva v-table-tablaNueva">
<div style="width: 710px;" class="v-table-header-wrap">
<div class="v-table-header" style="overflow: hidden;">
<div style="width: 900000px;">
<table>
<tbody>
<tr>
<td style="width: 326px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 317px;">Nombre del seguro</div>
</td>
<td style="width: 95px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 86px;">Descuento</div>
</td>
<td style="width: 88px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 79px;">Campaña</div>
</td>
<td style="width: 100px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 91px;">Edad Aseg.</div>
</td>
<td style="width: 191px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 182px;">Capital Asegurado</div>
</td>
<td style="width: 101px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 92px;">Contratable</div>
</td>
<td style="width: 106px;" class="v-table-header-cell">
<div class="v-table-resizer"></div>
<div class="v-table-sort-indicator"></div>
<div class="v-table-caption-container v-table-caption-container-align-left" style="width: 97px;">Documentos</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="v-table-column-selector" style="display: none;"></div>
</div>
<div id="yui_patched_v3_11_0_1_1423812986764_749" style="position: relative; overflow: auto; height: 190px; width: 710px;" class="v-scrollable v-table-body-wrapper v-table-body" tabindex="-1">
<div id="yui_patched_v3_11_0_1_1423812986764_748" style="height: 113px;">
<div style="height: 0px;" class="v-table-row-spacer"></div>
<table id="yui_patched_v3_11_0_1_1423812986764_747" class="v-table-table">
<tbody id="yui_patched_v3_11_0_1_1423812986764_746">
<tr id="yui_patched_v3_11_0_1_1423812986764_745" class="v-table-row" style="">
<td id="yui_patched_v3_11_0_1_1423812986764_744" style="width: 325px;" class="v-table-cell-content">
<div id="yui_patched_v3_11_0_1_1423812986764_743" style="text-align: left; width: 325px;" class="v-table-cell-wrapper">Seguro de protección familiar en femenino</div>
</td>
<td style="width: 94px;" class="v-table-cell-content">
<div style="text-align: left; width: 94px;" class="v-table-cell-wrapper">No</div>
</td>
<td style="width: 87px;" class="v-table-cell-content">
<div style="text-align: left; width: 87px;" class="v-table-cell-wrapper">No</div>
</td>
<td style="width: 99px;" class="v-table-cell-content">
<div style="text-align: left; width: 99px;" class="v-table-cell-wrapper">18 - 64</div>
</td>
<td style="width: 190px;" class="v-table-cell-content">
<div style="text-align: left; width: 190px;" class="v-table-cell-wrapper">40000.0 - 450000.0</div>
</td>
<td style="width: 100px;" class="v-table-cell-content">
<div style="text-align: left; width: 100px;" class="v-table-cell-wrapper">SI</div>
</td>
<td style="width: 105px;" class="v-table-cell-content">
<div style="text-align: left; width: 105px;" class="v-table-cell-wrapper">+Info</div>
</td>
</tr>
<tr id="yui_patched_v3_11_0_1_1423812986764_801" class="v-table-row-odd v-selected" style="">
<td style="width: 325px;" class="v-table-cell-content">
<div style="text-align: left; width: 325px;" class="v-table-cell-wrapper">Seguro de protección familiar</div>
</td>
<td id="yui_patched_v3_11_0_1_1423812986764_800" style="width: 94px;" class="v-table-cell-content">
<div id="yui_patched_v3_11_0_1_1423812986764_799" style="text-align: left; width: 94px;" class="v-table-cell-wrapper">No</div>
</td>
<td style="width: 87px;" class="v-table-cell-content">
<div style="text-align: left; width: 87px;" class="v-table-cell-wrapper">No</div>
</td>
<td style="width: 99px;" class="v-table-cell-content">
<div style="text-align: left; width: 99px;" class="v-table-cell-wrapper">18 - 64</div>
</td>
<td style="width: 190px;" class="v-table-cell-content">
<div style="text-align: left; width: 190px;" class="v-table-cell-wrapper">40000.0 - 250000.0</div>
</td>
<td style="width: 100px;" class="v-table-cell-content">
<div style="text-align: left; width: 100px;" class="v-table-cell-wrapper">SI</div>
</td>
<td style="width: 105px;" class="v-table-cell-content">
<div style="text-align: left; width: 105px;" class="v-table-cell-wrapper">+Info</div>
</td>
</tr>
<tr class="v-table-row" style="">
<td style="width: 325px;" class="v-table-cell-content">
<div style="text-align: left; width: 325px;" class="v-table-cell-wrapper">Seguro de protección familiar plus</div>
</td>
<td style="width: 94px;" class="v-table-cell-content">
<div style="text-align: left; width: 94px;" class="v-table-cell-wrapper">No</div>
</td>
<td style="width: 87px;" class="v-table-cell-content">
<div style="text-align: left; width: 87px;" class="v-table-cell-wrapper">No</div>
</td>
<td style="width: 99px;" class="v-table-cell-content">
<div style="text-align: left; width: 99px;" class="v-table-cell-wrapper">18 - 64</div>
</td>
<td style="width: 190px;" class="v-table-cell-content">
<div style="text-align: left; width: 190px;" class="v-table-cell-wrapper">100000.01 - 2666666.0</div>
</td>
<td style="width: 100px;" class="v-table-cell-content">
<div style="text-align: left; width: 100px;" class="v-table-cell-wrapper">SI</div>
</td>
<td style="width: 105px;" class="v-table-cell-content">
<div style="text-align: left; width: 105px;" class="v-table-cell-wrapper">+Info</div>
</td>
</tr>
</tbody>
</table>
<div style="height: 0px;" class="v-table-row-spacer"></div>
</div>
<div tabindex="0" style="position: fixed; top: 0px; left: 0px;"></div>
</div>
<div aria-hidden="true" style="display: none; width: 710px;" class="v-table-footer-wrap">
<div class="v-table-footer" style="overflow: hidden;">
<div style="width: 900000px;">
<table>
<tbody>
<tr>
<td style="width: 325px;">
<div class="v-table-footer-container" style="width: 324px;"> </div>
</td>
<td style="width: 94px;">
<div class="v-table-footer-container" style="width: 93px;"> </div>
</td>
<td style="width: 87px;">
<div class="v-table-footer-container" style="width: 86px;"> </div>
</td>
<td style="width: 99px;">
<div class="v-table-footer-container" style="width: 98px;"> </div>
</td>
<td style="width: 190px;">
<div class="v-table-footer-container" style="width: 189px;"> </div>
</td>
<td style="width: 100px;">
<div class="v-table-footer-container" style="width: 99px;"> </div>
</td>
<td style="width: 105px;">
<div class="v-table-footer-container" style="width: 104px;"> </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

Resources