I have i am trying to retrieve text from html, so first load html
HtmlWeb web = new HtmlWeb();
HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
doc = web.Load(url);
Here the text to find is 0.802 and is directly in element and it works
for this html
<tr>
<th>Reported-Normalized Volume Ratio</th>
<td>0.802</td>
</tr>
The search string
var t5 = doc.DocumentNode.SelectSingleNode("//th[.='Reported-Normalized Volume Ratio']/following-sibling::td").InnerText;
The value of t5 is 0.802 as expected
Now I need to find data-price-btc="3535.5500891201248734"
<tr>
<th style="width: 300px;">Reported Trading Volume</th>
<td><div data-target="price.price" data-price-btc="3535.5500891201248734">
</div></td>
</tr>
Search string
var t1 = doc.DocumentNode.SelectSingleNode("//th[.='Reported Trading Volume']/following-sibling::td/div/#data-price-btc");
t1 is empty and I dont understand why
The problem is that with HTML Agility Pack
direct selection of attributes is not supported
https://html-agility-pack.net/knowledge-base/541953/selecting-attribute-values-with-html-agility-pack
Related
I am taking in an input from a text box in one HTML page and saving it to local storage using this function.
function writeMail(emailInput){
console.log(emailInput);
localStorage.setItem('emailInput',emailInput);
let theEmail = localStorage.getItem('emailInput');
console.log(theEmail);
}
This works fine and I can check the inputs are correct through my console logs.
Yet when I try and get this from local storage to store in my table in my emailList html file, it seems to not work at all.
<body>
email = localstorage["emailInput"];
<table>
<caption> Email list
</caption>
<tr>
<th> Name </th>
<th> Email </th>
</tr>
<tr>
<td>email </td>
</tr>
</table>
</body>
For you to be able to manipulate the contents of HTML, you need to modify the DOM node specifically. In this specific case you should have an id attribute on the <td>and then use the innerHTML property of that node to set the desired value.
i.e.:
<td id="xpto"></td>
then on the code:
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
You should also set that code inside of a function that is called once the document has finished loading, so something like:
JAVASCRIPT:
function go(){
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
}
HTML:
<body onload="go()">
I have a large table in WordPress, I need to change the order of the columns, but I have to do it manually every time, when I need. Is there any plugin out there, in which all table loads up and I drag and drop the whole column from there as my choice?
The website is here
Based on your question, i can give you a demo to show you how to move forward with your requirements.
Please check this UPDATED FIDDLE. As you requested we are using Dragtable js.
Once sorting is completed we checks each row of the table finds each column of the respective row and create a json tree structure.
Html
<table id="sort_table">
<thead>
<tr>
<th></th>
<th class="draggable">Col1</th>
<th class="draggable">Col2</th>
<th class="draggable">Col3</th>
<th class="draggable">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>Data11</td>
<td>Data12</td>
<td>Data13</td>
<td>Data14</td>
</tr>
<tr>
<td>Row2</td>
<td>Data21</td>
<td>Data22</td>
<td>Data23</td>
<td>Data24</td>
</tr>
<tr>
<td>Row3</td>
<td>Data31</td>
<td>Data32</td>
<td>Data33</td>
<td>Data34</td>
</tr>
<tr>
<td>Row4</td>
<td>Data41</td>
<td>Data42</td>
<td>Data43</td>
<td>Data44</td>
</tr>
</tbody>
</table>
JS (UPDATED)
$(document).ready(function() {
$('#sort_table').dragtable({
dragaccept: '.draggable',
beforeStop: function() {
var tree = {};
var rows = [];
$('#sort_table tr').each(function() {
var col_count = 0;
var cols = [];
$(this).children().each(function() {
cols[col_count] = $(this).html();
col_count++;
});
rows.push(cols);
});
tree.data = rows;
var tree_json = JSON.stringify(tree); // use the variable to save to DB
console.log(tree_json);
}
});
});
You can save the variable tree_json to database (Call ajax to php and save to DB)
On each page load you could take the value from database to a variable and using json_decode to make the string a json object
$table_structure = ; // Code to take from db
$table_structure = json_decode($table_structure);
You can copy and paste json from console to check if its valid using JSONLint
Building a full stack app which loads a list of songs from an api into a table. How can I make a row's fields editable when the user clicks on the Edit button?
Maybe using a modal would be better?
The API is running on Rails and the table is generated using a template engine Handlebars.
You can do this using JavaScript and uniqueIDs generated most likely from the database.
In the below example, wherever the number "10" is used it is meant to renote the presence of a uniqueID, NOT just as a string 10. AKA, in a working example, is ten would be a uniqueID you have generated from a database, and linked to the code below.
The example:
<table>
<thead>
<th>Song Name</th>
<th>Artist</th>
<th>Genre</th>
<th colspan="2">Actions</th>
</thead>
<tbody>
//Whatever code here should be written in something like PHP which can
return multiple values of the example I've written.
<tr id="tr_10">
<td id="songName_10">Nightcall</td>
<td id="songArtist_10">Kavinsky</td>
<td id="songGenre_10">Synthwave</td>
<td><button onclick="editSongInfo(10)">Edit</button></td>
<td><button>Remove</button></td>
</tr>
</tbody>
<script>
function editSongInfo(uniqueId){
var x = document.getElementById("songName_" + uniqueId);
x.innerHTML = "<input type='text' placeholder='Enter edited song name
here.'>";
x = document.getElementById("songArtist_" + uniqueId);
x.innerHTML = "<input type='text' placeholder='Enter edited song artist
here.'>";
x = document.getElementById("songGenre_" + uniqueId);
x.innerHTML = "<input type='text' placeholder='Enter edited song genre
here.'>";
}
</script>
This will change your text to an input upon click, but it will not submit the response to the database, as that is not the question you asked, and you have not provided any code, or frameworks you wish to use, or even how you access you database.
This answer is the best I can provide with the information you have supplied, which is an image of a table and the tags, "html" and "html-table"
Working example of the above code, here: http://jsfiddle.net/fo2z1vLa/11/
I have been looking everywhere for any possible workaround to this issue.
All of the data at my company is accessed via a web portal that produces static HTML pages. Unfortunately our department cannot be given direct access to the Server which would make my life easy so I need to page scrape this portal to find the data that I need. My navigation is fine and i am quite experienced with scraping where elements are named or given an ID, however this does not have either.
Anyway, background out of the way.
I want to grab a table from the page that has a unique style of "empty-cells: show;":
<TABLE cellspacing=10 cellPadding=10 border="1" style="empty-cells: show;">
</TABLE>
Or failing that there is a heading in the first row which always contains the same text string. Once I have that table I can manipulate the data I need from it. Hugely sensitive data here guys, so I can't provide the full page code unfortunately.
I know that there have been many posts regarding GetElementByRegex but I cannot find a post or website that actually explains how to use it. Instead they all want me to install their add-on which isn't an option (I need to learn this to sate my thirst for knowledge).
To help I have added the full table code below removing the sensitive data:
<TABLE cellspacing=10 cellPadding=10 border="0" width=100%>
<tr>
<td>
<TABLE cellspacing=10 cellPadding=10 border="1" style="empty-cells: show;">
<TR class="row0">
<TD style="width: 25%; background-color: #A3DCF5;"><strong>TITLE:</strong></TD>
<TD>LINE1</TD>
</TR>
<TR class="row1">
<TD> </TD><td>LINE2</td>
</TR>
<TR class="row0">
<TD> </TD><td>LINE3</td>
</TR>
<TR class="row1">
<TD> </TD><td>LINE4</td>
</TR>
<TR class="row0">
<TD> </TD><td>LINE5</td>
</TR>
</TABLE>
</td>
</tr>
</TABLE>
There are many other tables though so using a Len check will not help me top sift through the TD tags.
Dim tbls, tbl, tr, j, td, row, sht
Set tbls = IE.document.getElementsByTagName("table")
For Each tbl in tbls
'item indexes are zero-based (AFAIR)
If tbl.Rows(0).Cells(1).innerText = "LINE1" Then
'EDIT: extracting the table contents
Set sht = ActiveSheet
row = 3
For Each tr In t.getelementsbytagname("TR")
j = 1
For Each td In tr.getelementsbytagname("TD")
sht.Cells(row + 1, j).Value = td.innerText
j = j + 1
Next
row = row + 1
Next
Exit For 'stop looping
End If
Next
Answer by Glitch_Doctor edited out of question:
Thank you for all the help Tim!
The below worked perfectly for me:
Dim tbls, tbl
Dim L1, L2, L3, L4, L5 As String
Set tbls = IE.Document.getElementsByTagName("table")
For Each tbl In tbls
If tbl.Rows(0).Cells(0).innerText = "Card Address:" Then
On Error Resume Next
L1 = tbl.Rows(0).Cells(1).innerText
L2 = tbl.Rows(1).Cells(1).innerText
L3 = tbl.Rows(2).Cells(1).innerText
L4 = tbl.Rows(3).Cells(1).innerText
L5 = tbl.Rows(4).Cells(1).innerText
Exit For
End If
Next
Worksheets("Sheet2").Range("A1").Value = L1
Worksheets("Sheet2").Range("A2").Value = L2
Worksheets("Sheet2").Range("A3").Value = L3
Worksheets("Sheet2").Range("A4").Value = L4
Worksheets("Sheet2").Range("A5").Value = L5
End Sub
I have a HTML widget in my ui.xml which I am using in Uibinder to populate data as given below:
ui.xml ->
<g:HTML ui:field="operationsDetailTableTemplate" visible="false">
<table class="{style.LAYOUT_STYLE}" width="100%" border="1">
<tr>
<td><img src="images/indent-blue.gif"/></td>
<td>
<table class="{style.DEFAULT_STYLE}">
<thead>
<tr>
<th>OperationUuid</th>
....
</tr>
</thead>
<tbody>
<tr>
<td>%s</td>
...
</tr>
</tbody>
</table>
</td>
</tr>
....
</g:html>
Uibinder.java--->
String htmlText = operationsDetailTableTemplate.getHTML()
.replaceFirst("%s", toSafeString(operation.getOperationUuid()))
....
HTML html = new HTML(htmlText);
operationsDetail.add(html);
The above is done in a for loop for each of the operation retrieved from the database.
My question is how I can embed a hyperlink or an anchor tag on one of the cell (eg. operation id ) for each of the operation set retrieved. I also wish to have a listener attached to it.
P.S. - It does not allow me to have a anchor tag in HTML in ui.xml.
You'd better use the tools in the way they've been designed to be used: use ui:field="foo" on the <td> and #UiField Element foo + foo.setInnerHTML(toSafeString(...)) instead of extracting the HTML, modifying it and reinjecting it elsewhere. You could also use a <g:Anchor> and attach an #UiHandler to handle ClickEvents.
Your way of using UiBinder makes me think of SafeHtmlTemplates, or the new UiRenderer aka UiBinder for Cells: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Rendering_HTML_for_Cells