Develop Reference

Using HtmlAgilityPack with C# to find all href links within td elements in html page

I am attempting to use HtmlAgilityPack package to find each of the href links within td tags throughout an entire html page. The trick is that these tables start deep down into the html structure. I noticed with HtmlAgilityPack you can't just say get all tds that are within trs on a page. There is a parent div wrapped around each table with a class on it "table-group" that I am not showing in my sample below. Maybe I can use that as a starting point? The biggest trouble that I am dealing with is that there are several parent elements above everything in my sample below, but I want to skip all of that and start here.
Here is a sample of the structure I am trying to navigate:
<table>
<thead>
</thead>
<tbody>
<tr>
<td>Link 1</td>
<td>1</td>
</tr>
<tr>
<td>Link 2</td>
<td>2</td>
</tr>
<tr>
<td>Link 3</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
</thead>
<tbody>
<tr>
<td>Link 4</td>
<td>4</td>
</tr>
<tr>
<td>Link 5</td>
<td>5</td>
</tr>
<tr>
<td>Link 6</td>
<td>6</td>
</tr>
</tbody>
</table>
I would like my end result to be:
https://path-to-pdf1
https://path-to-pdf2
https://path-to-pdf3
https://path-to-pdf4
https://path-to-pdf5
https://path-to-pdf6
Here is what I have tried:
var html = #"https://myurl.com";
HtmlWeb web = new HtmlWeb();
var htmlDoc = web.Load(html);
var nodes = htmlDoc.DocumentNode.SelectNodes("//table/tbody/tr/td/a[0]");
foreach (var item in nodes)
{
Console.WriteLine(item.Attributes["href"].Value);
}
Console.ReadKey();

Modify
var nodes = htmlDoc.DocumentNode.SelectNodes("//table/tbody/tr/td/a[0]");
to
var nodes = htmlDoc.DocumentNode.SelectNodes("//table/tbody/tr/td[1]/a");
then you wil get the result you want ,you could read the documents related with XPath for more details
I tried in a MVC project with the same html file:
Update:
I copied the html codes to the html page in my local and get the nodes successfully

GridView with Jquery data table implementation

Recently I was trying to use the features of "https://datatables.net" in one GridView render. It wasn't possible because the render always gives a table without the correct formatting (without thead). Is there a way to transform the render into the correct format?
Correct format:
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>

This code formats one table to the correct format and then runs the .DataTable(); on the corrected formatted table.
To use this replace the ID of your table in '#gdVscQuote'
If the page you are working on has more than one table this will not work, is not tested.
$(document).ready( function () {
//replace tr
$($('#gdVscQuote')[0].childNodes[1].childNodes[0]).wrap('<thead/>').contents().unwrap();
//replace all td with th inside thead
$('thead td').wrap('<th/>').contents().unwrap();
//get thead
var thead = $("thead").get(0);
//remove saved thead to replace above tbody thead
$("thead").remove();
//add thead correctly
$('#gdVscQuote')[0].prepend(thead);
// replace tds for tr
$($('thead')[0].childNodes).wrapAll("<tr/>")
//add jQuery table functionality
$('#gdVscQuote').DataTable();
});

How to get all value of all checked rows in table with FormCollection?

I have searched for help but can find any topic that could help me.
I have a table like this
<table id="tableftest" class="table table-striped table-vmiddle">
<thead>
<tr>
<th data-column-id="" data-sortable="false">
<input type="checkbox" id="checkall" title="chọn tất cả" onclick="" />
</th>
<th data-column-id="ip">IP</th>
<th data-column-id="network" hidden="hidden">Network</th>
<th data-column-id="sender">GateWay</th>
<th data-column-id="received">SubnetMask</th>
<th data-column-id="viewdetail">VPS được gán</th>
#*<th data-column-id="commands" data-formatter="commands" data-sortable="false"></th>*#
</tr>
</thead>
<tbody>
#foreach (VPSIP ipitem in ip)
{
<tr>
#if (ipitem.VPSID != null)
{
<td></td>
}
else
{
<td>
<input type="checkbox" class="ipDelListClass" name="ipDelList" value="#ipitem.IpID" />
</td>
}
<td>#(ipitem.IPAddress)</td>
<td hidden="hidden">#ipitem.NetworkRanx.NetworkAddress</td>
<td>#(ipitem.NetworkRanx.Gateway)</td>
<td>#ipitem.NetworkRanx.SubnetMask</td>
#if (ipitem.VPSID != null)
{
<td>#(ipitem.VPSs.VPSName)</td>
#*<td></td>*#
}
else
{
<td></td>
#*<td>
<button title="Xóa ip" class="btn btn-danger zmdi zmdi-delete" data-toggle="modal" data-target="#IpDel_#ipitem.IpID" style="font-size:medium"></button>
</td>*#
}
</tr>
}
</tbody>
</table>
When I check all checkboxs in table and click button delete, it will post data to this controller
[HttpPost]
public ActionResult IPDeleteMany(FormCollection f)
{
var ipDelArray = f.Get("ipDelList");
ServerBusiness serBu = new ServerBusiness();
string[] ipDelList = ipDelArray.Split(',');
try
{
foreach (string ipId in ipDelList)
{
var iprow = serBu.getIPById(int.Parse(ipId));
serBu.removeIPById(iprow);
}
TempData["Success"] = "IP đã bị xóa!";
return RedirectToAction("ViewListIP", "TechnicalStaff");
}
catch
{
TempData["Error"] = "Lỗi!";
return RedirectToAction("ViewListIP", "TechnicalStaff");
}
}
When it runs, it only get values of rows that is visible, not all the rows in table.
Is there anyway to get all of values checked in table include invisible rows?

change your hidden="hidden" to style="display:none;".
And for you other pages, because you didnt use Ajax your data isn't exist in fact, so you can:
use Ajax and hide your old rows and append new rows where exist
all of your desired rows in your html however some of them be
hidden.
force your users to submit current page data and then switch pages.

Retrieve the table data with xpath and Selenium

I have HTML with looks basically like the following
....
<div id="a">
<table class="a1">
<tbody>
<tr>
<td><a href="a11.html>a11</a>
</tr>
<tr>
<td><a href="a12.html>a12</a>
</tr>
</tbody>
<table>
</div>
...
The following coding in C# I used, however, I cannot retrieve the URL in this stage
IWebElement baseTable = driver.FindElement(By.ClassName(TableID));
// gets all table rows
ICollection<IWebElement> rows = baseTable.FindElements(By.TagName("tr"));
// for every row
IWebElement matchedRow = null;
foreach(var row in rows)
{
Console.Write (row.FindElements(By.XPath("td/a")));
}

First of all, you gave us invalid markup. Right one:
<div id="a">
<table class="a1">
<tbody>
<tr>
<td>
a11
</td>
</tr>
<tr>
<td>
a12
</td>
</tr>
</tbody>
</table>
</div>
If you have only one anchor in table row, you should use this code to retrieve url:
IWebElement baseTable = driver.FindElement(By.ClassName(TableID));
// gets all table rows
ICollection<IWebElement> rows = baseTable.FindElements(By.TagName("tr"));
// for every row
IWebElement matchedRow = null;
foreach (var row in rows)
{
Console.WriteLine(row.FindElement(By.XPath("td/a")).GetAttribute("href"));
}
You need to get href attribute of found element. Otherwise, row.FindElement(By.XPath("td/a") will print type name of the IWebElement inherited class, because it is an some type object, not string.

This does not look like a valid xpath to me
Console.Write (row.FindElements(By.XPath("td/a")));
try
Console.Write (row.FindElements(By.XPath("/td/a")));

Multiplying a textbox with a cell in a dynamically created table with JQuery

I have a dynamically created table with id called "editTable" that looks as follows:
<tbody>
#{var i = 0;}
#foreach (var item in Model)
{
<tr>
<td width="25%">
#Html.DisplayFor(modelItem => item.Product.Name)
</td>
<td width="25%">
#Html.DisplayFor(modelItem => item.Quantity)
</td>
<td width="25%">
<div class="editor-field">
#Html.EditorFor(modelItem => item.UnitPrice)
#Html.ValidationMessageFor(model => item.UnitPrice)
</div>
</td>
<td width="25%" id="total"></td>
</td>
</tr>
}
</tbody>
The 3th td-element consists of a C# textbox that is turned into a element in html.
Now I want to multiply the quantity by the unit price to display this value in the 4th td element next to it. This value should update every time the value in the textbox is adjusted. I am a newbie at JQuery / JavaScript and came up with the following code:
// Calculating quantity*unitprice
$('#editTable tr td:nth-child(3) input').each( function (event) {
var $quant = $('#editTable tr td:nth-child(2)', this).val();
var $unitPrice = $('#editTable tr td:nth-child(3) input', this).val();
$('#editTable tr td:nth-child(4)').text($quant * $unitPrice);
});
This doesn't work and only displays NaN in the 4th element. Can anyone help me updating this code to a working version? Any help would be very much appreciated.

I geussed you accidentally switched units and price because it has more logic to change the number of units then the price. I took your html and javascript and tried to change as little as possible to make it work (I'm not saying the solution is perfect, I just don't want to give you a totaly different example of how to do it).
The html (The C# is irrelevant for this problem):
<table id="editTable">
<tbody>
<tr>
<td width="25%">
Product name
</td>
<td width="25%">
5
</td>
<td width="25%">
<div class="editor-field">
<input id="UnitPrice" name="UnitPrice" type="number" value="2" style="width:40px" />
</div>
</td>
<td width="25%" id="total"></td>
</tr>
</tbody>
</table>
The javascript/jquery (which should run on load):
$('#editTable tr td:nth-child(3) input').each(updateTotal);
$('#editTable tr td:nth-child(3) input').change(updateTotal);
var element;
function updateTotal(element)
{
var quantity = $(this).closest('tr').find('td:nth-child(2)').text();
var price = $(this).closest('tr').find('td:nth-child(3) input').val();
$(this).closest('tr').find('td:nth-child(4)').text(quantity * price);
}
The problem you had were with jquery. I've created a function that recieves an element (in our case it's your UnitPrice input), then it grabs the closest ancestor of type tr (the row it's in) and from there it does what you've tried to do.
You've used jquery selector to get all 2nd cells in all table rows, the closest('tr').find limits it to the current row.
You've tried to use .val() on a td element, you should use either .text() or .html(). Instead, You can also add a data-val="<%=value%>" on the td and then use .data('val').
It will be better to take the units directly from $(element).val() and no going to the tr and then back into the td and the input.
To see it working: http://jsfiddle.net/Ynsgf/1/
I hope I didn't caused you any confusion with my explanation and the options I gave you.

Here is another way to write the jquery part.
$('#editTable tr').each(function (i, row) {
var $quant = $(row).find('.editor-field input').val();
var $unitPrice = $(row).find('.editor-field input').val();
$(row).find('td:nth-child(4)').text($quant * $unitPrice);
});