Can someone please provide me some sample code to get data from a nested table below. I want data from Row 1 to row 2 all the columns. If there is an ID in the table I am able to grab data, but there is no ID. I pretty much search all over the internet and still could not find an answer. Please help
<div id="Div-content_ID">
<table><tr><td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td >
<table >
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="3" cellspacing="1" border="0" bgcolor="#d3d3d3">
<tr align="center" valign="middle">
<td>row1 Col 1</td>
<td >row1 Col 2 </td>
<td >row1 Col 3 </td>
<td >row1 Col 4 </td>
<td >row1 Col 5 </td>
<td >row1 Col 6 </td>
<td >row1 Col 7 </td>
<td >row1 Col 8 </td>
<td >row1 Col 9 </td>
<td >row1 Col 10 </td>
<td >row1 Col 11 </td>
<tr>
<tr>
<td>row2 Col 1</td>
<td >row2 Col 2 </td>
<td >row2 Col 3 </td>
<td >row2 Col 4 </td>
<td >row2 Col 5 </td>
<td >row2 Col 6 </td>
<td >row2 Col 7 </td>
<td >row2 Col 8 </td>
<td >row2 Col 9 </td>
<td >row2 Col 10 </td>
<td >row2 Col 11 </td>
</tr>
<tr>
<td>
<table>
<tr>
<td></td><td></td></tr>
</table>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td</td>
</tr>
<tr><td></td></tr>
</table>
</div>
1) Your HTML is poorly formed:
The 1st table never gets closed off properly. There is missing </td> </tr> </table>
There's a <td></td> pair near the end that has a missing '>'
2) With HTML Agility Pack you can select on anything, not just id or classes. So, as long as your HTML structure remains the same, you could select the 1st div, then from its children: the 1st table, then from its children: the 4th row, then from its children: the 1st table. etc etc
See here for an example for selecting by table: HTML Agility pack - parsing tables
Related
Below is my html structure (table):
<table>
<tr><td>A</td></tr>
</table>
<table>
<tr><td>B</td></tr>
</table>
<table>
<table>
<table>
<table>
<tbody>
<tr class="A">
<td>
ABC
</td>
<td>
Link
</td>
</tr>
<tr class="B">
<td>
DEF
</td>
<td>
Link2
</td>
</tr>
</tbody>
</table>
</table>
</table>
</table>
I tried to get data as below:
HtmlNode thediv = doc.DocumentNode.SelectSingleNode("//table[3]//table[1]");
⇒ It works well.
But, I tried with code as below to get data ABC/DEF in table 3.
HtmlNode thediv = doc.DocumentNode.SelectSingleNode(
"//table[3]//table[1]//table[2]//table[3]");
⇒ Not OK.
I think what you actually want is
var bothNodes = doc.DocumentNode.SelectNodes("//table[3]//table[1]//tr/td[1]/text()");
That will give you both nodes ABC and DEF of the third table
You can try it here: XPathFiddle
Your code doesn't work because there is no node that fits the second query.
Step by Step:
This is your original html:
<table>
<tr><td>A</td></tr>
</table>
<table>
<tr><td>B</td></tr>
</table>
<table>
<table>
<table>
<table>
<tbody>
<tr class="A">
<td>
ABC
</td>
<td>
Link
</td>
</tr>
<tr class="B">
<td>
DEF
</td>
<td>
Link2
</td>
</tr>
</tbody>
</table>
</table>
</table>
</table>
//table[3] gives you the third table
<table>
<table>
<table>
<table>
<tbody>
<tr class="A">
<td>
ABC
</td>
<td>
Link
</td>
</tr>
<tr class="B">
<td>
DEF
</td>
<td>
Link2
</td>
</tr>
</tbody>
</table>
</table>
</table>
</table>
//table[3]//table[1] gives you the first table that's a descendant of the third table.
<table>
<table>
<table>
<tbody>
<tr class="A">
<td>
ABC
</td>
<td>
Link
</td>
</tr>
<tr class="B">
<td>
DEF
</td>
<td>
Link2
</td>
</tr>
</tbody>
</table>
</table>
</table>
//table[3]//table[1]//table[2] would give you the second table that's a descendant the first table that's a descendant of the third table. And there is only one --> doesn't work.
Hi Manfred Radlwimmer,
Thank for your answer. I did it :).
The code is below:
if (doc.DocumentNode.SelectNodes("//table") != null)
{
HtmlNode thediv = doc.DocumentNode.SelectSingleNode("//table[3]//table[1]//tr/td[1]//tr[3]//table//tr/td[2]//table");
HtmlNodeCollection cells = thediv.SelectNodes("tr");
for (var j = 1; j < cells.Count; ++j)
{
var data= cells[j].InnerText;
}
}
Hello i need to select all tr,but in some tr i have a table with id=WHITE_BANKTABLE.
I need to select only Tr that dont't have this table with id.
My html
<table id=mytable_body>
<TR id=TR_ROW_BANKTABLE class=TR_ROW_BANKTABLE style="BACKGROUND-COLOR: #f6f8fa" align=right bgColor=#f6f8fa>
<TD noWrap align=right w_idth="190"> </TD>
<TD align=right>010073/15922</TD>
</TR>
> **//This Tr with TABLE id=WHITE_BANKTABLE i don't need**
<TR>
<TD colSpan=8 align=center>
<TABLE id=WHITE_BANKTABLE cellSpacing=0 borderColorDark=#edf0f5 cellPadding=3 width="100%" bgColor=white borderColorLight=#edf0f5 border=1 isWhiteTable="Y">
<TBODY>
<TR class=TR_BANKTABLE align=right vAlign=top>
<TD> sdfsd </TD>
<TD>sdfs</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR id=TR_ROW_BANKTABLE class=TR_ROW_BANKTABLE style="BACKGROUND-COLOR: #f6f8fa" align=right bgColor=#f6f8fa>
<TD noWrap align=right w_idth="190"> </TD>
<TD align=right>010073/15922</TD>
</TR>
</table>
Thanx.
Assuming the above is correctly formatted as XML (insert missing double quotes):
var q =
xml.XPathSelectElements(#"/tr[not(descendant::table[#id = 'WHITE_BANKTABLE'])]");
How to find the value of colspan from the html table column
I have tried
<td[^>]*>(.*?)</td>
But what to add here to get the colspan value irrespective of location?
EDIT
<table style="width: 100%;">
<tr>
<th colspan="3" align="center">
2013
</th>
</tr>
<tr>
<td colspan="2" align="center">
2012
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Tried
<tr[^>]*>\s*<t(d|h)[^>].*?colspan=['"](\d+)['"].*?>\s*(.*?)\s*</t(\1)>\s*</tr>
But this will not work if there is no quote like
<td colspan=2 align="center">
2012
</td>
I suggest you to use HtmlAgilityPack (available from NuGet) for HTML parsing. Here is sample of getting all td elements which have colspan attribute. Then in a loop you can get colspan attribute value for each cell:
HtmlDocument hdoc = new HtmlDocument();
hdoc.Load("index.html");
var cells = hdoc.DocumentNode.SelectNodes("//td[#colspan]");
foreach(var cell in cells)
string colspan = cell.Attributes["colspan"].Value;
UPDATE: For your sample HTML this code will find single cell and colspan will have value 2
I have following HTML.
<div id = "aa">
<table width="100%">
<tbody>
<!-- ngRepeat: msg in globalChat -->
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="8">
<td class="ng-binding" ng-1375781897068="9">
A
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="10">
<td class="ng-binding" ng-1375781897068="11">
B
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="12">
<td class="ng-binding" ng-1375781897068="13">
C
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="14">
<td class="ng-binding" ng-1375781897068="15">
D
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="16">
<td class="ng-binding" ng-1375781897068="17">
E
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="18">
<td class="ng-binding" ng-1375781897068="19">
F
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="20">
<td class="ng-binding" ng-1375781897068="21">
G
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="22">
<td class="ng-binding" ng-1375781897068="23">
H
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="24">
<td class="ng-binding" ng-1375781897068="25">
I
</td>
</tr>
<tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="26">
<td class="ng-binding" ng-1375781897068="27">
J
</td>
</tr>
<tr class="ng-scope" ng-repeat="ms`enter code here`g in globalChat" ng-1375781897068="28">
<td class="ng-binding" ng-1375781897068="29">
K
</td>
</tr>
</tbody>
</table>
</div>
I have used AngularJS to render values
I simply want that if I click on any text in div then only that particular text should be highlighted in div. And by clicking on other text in div previously selected text should be deselected and new text should be selected. How can I do this?
Is this what you were looking for:
http://jsfiddle.net/bT8vs/
The jQuery:
$(document).ready(function(){
$('div p').click(function(){
$('div p').css("background-color", "transparent");
$(this).css("background-color", "yellow");
});
});
This is pretty much the same answer as imconnell, but applied to the given layout: http://jsfiddle.net/rpqvX/7/
$(function() {
$("td.ng-binding").click(function() {
$("td.ng-binding").removeClass("highlight");
$(this).addClass("highlight");
});
})
Just as an alternative, have a look at the following jQuery plugin:
highlight: JavaScript text higlighting jQuery plugin
I´m trying to get the values of TDs inside a table using WatiN. The problem is that I´m not able to select a table by Id (because it´s missing). Can I select it based on class?
<TABLE WIDTH="100%" CELLSPACING=0 CELLPADDING=5 BORDER=0 class="TABLEBORDER">
<TR>
<TH class=HEADTEXT>
Target
</TH>
<TH class=HEADTEXT>
Trigger<br>enabled?
</TH>
<TH class=HEADTEXT>
Account
</TH>
<TH class=HEADTEXT>
Password<br>changed?
</TH>
<TH class=HEADTEXT>
Error message<br>(if any)
</TH>
<!-- S_STATUS_ROW -->
<TR>
<TD valign=top class=CELLTEXT>
RACF
</TD>
<TD valign=top class=CELLTEXT>
No
</TD>
<TD valign=top class=CELLTEXT>
USERNAME1
</TD>
<TD valign=top class=CELLTEXT>
Yes
</TD>
<TD valign=top class=CELLTEXT>
</TD>
<!-- S_STATUS_ROW -->
<TR>
<TD valign=top class=CELLTEXT>
Domain Name
</TD>
<TD valign=top class=CELLTEXT>
No
</TD>
<TD valign=top class=CELLTEXT>
FirstName.LastName
</TD>
<TD valign=top class=CELLTEXT>
Yes
</TD>
<TD valign=top class=CELLTEXT>
</TD>
<!-- S_STATUS_ROW -->
<TR>
<TD valign=top class=CELLTEXT>
NotesWeb
</TD>
<TD valign=top class=CELLTEXT>
No
</TD>
<TD valign=top class=CELLTEXT>
USERNAME1
</TD>
<TD valign=top class=CELLTEXT>
Yes
</TD>
<TD valign=top class=CELLTEXT>
</TD>
<!-- S_STATUS_CONTENT_BOTTOM -->
</TABLE>
There are other tables in the page. The one that I am interested is the only one that is formatted like above and I am only interested in the 3rd Column (where it says YES.. if there is a problem then it will say NO).
The table above is the only one with the class=TABLEBORDER
how can I access the 3rd column of every table row?
You can use Find.BySelector(""), which is very similar to JQuery. For example:
var element = browser.Element(Find.BySelector("Table TD"));
To identify the table, use Find.ByClass()
There are a number of ways to get the values of a particular column, but for simplicity's sake I tend to just iterate through the table rows; easy to understand now and 6 months from now when you come back to the code.
Code: Print to the console the content of the 4th column (the Yes values in the HTML above), the loop starts at 1, not 0, so the first row is ignored as TH elements are not seen as table cells.
IE browser = new IE();
browser.GoTo("[yourURL]");
Table theTable = browser.Table(Find.ByClass("TABLEBORDER"));
for (int i = 1; i < theTable.OwnTableRows.Count; i++)
{
Console.WriteLine("column value:" + theTable.OwnTableRows[i].TableCells[3].Text);
}
The above has been tested on WatiN2.1, IE9, Win7