HTML - Change display order of entire tables on a page - html

I have a list of tables with various elements on a page. I want to have the display order of the various tables change randomly each time a page is loaded. Any ideas on how to do this? For reference, the code below shows the first two tables. Say I wanted to randomly change their display order - how would I do that?
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/CleanFund_LOGO.jpg" alt="Clean Fund LLC" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Clean Fund LLC</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $500K - $15M
<strong>Types of Projects:</strong> Any
<strong>Contact:</strong> Josh Kagan
www.cleanfund.com
</span>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/Greenworks-Lending-Logo.jpg" alt="Greenworks Lending" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Greenworks Lending</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $30K - $5M
<strong>Types of Projects:</strong> Any Eligible Technologies and Properties
<strong>Contact:</strong> azech#greenworkslending.com
www.greenworkslending.com
</span>
</td>
</tr>
</table>

Are you able to use javascript on that page? My suggestion would be to write a javascript function that selects the table elements and then appends them back to their parent element in a random order.

This shows how to do with jQuery. You would need to use some JavaScript to accomplish this and jQuery is one option. You need a language like JavaScript to do this type of dynamic content.
https://css-tricks.com/snippets/jquery/shuffle-dom-elements/
Here is the code on the page in case it gets deleted, this was take from that page:
$.fn.shuffle :
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
And the usage is as follows:
// Shuffle all list items within a list:
$('ul#list li').shuffle();
// Shuffle all DIVs within the document:
$('div').shuffle();
// Shuffle all <a>s and <em>s:
$('a,em').shuffle();
In your case, you would:
Include jQuery js file in your webpage
Save the code for $.fn.shuffle and save in a js file, and in include that in your webpage
Include the javescript to call the shuffle: $('table').shuffle();

Related

Transferring variables across HTML pages

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()">

Cheerio not finding table content

I need to parse an HTML containg a table.
<div>
<table id="tableID">
<tr>
<td class="tdClass">
<span id="id1">Some data i need to access</span>
</td>
<td class="tdClass">
<span id="id2">Some data i need to access</span>
</td>
</tr>
</table>
</div>
I'm using cheerio on a NW.js app. I can't figure out how to access the datas, I've tried with span's ids, but it doesn't work.
The div is contained in the body of the page.
var $ = cheerio.load(html)
alert($('#id1').html())
I'm getting null when I'm trying to alert the content of the span.
Try this:
$ = cheerio.load(html, {normalizeWhitespace: false, xmlMode: true});

Scraping HTML by Class in VBA

I have a html code as shown
<div class="property-title visible-xs">
<a href="/property/473902/Office-Lot">
<h2><b> 2nd Floor, Block D5, Solaris Dutamas, No. 1, Jalan Dutamas 1, 50480, Kuala Lumpur</b></h2>
</a>
</div>
<p style="color: #0071ee;">Office Lot</p>
<h4><b>RM 880,000</b></h4>
<div>
<table>
<!-- <tr><td>Office Lot</td></tr> -->
<tr>
<td>Property Code</td><td>:</td><td>PB473902</td>
</tr>
<tr>
<td>Auction Date</td><td>:</td><td>2016-02-26</td>
</tr>
<tr>
<td>Built up </td><td>:</td><td>754 sq.ft </td>
</tr>
<tr>
<td>Tenure</td><td>:</td><td>Freehold</td>
</tr>
and I used the following code to extract the details "2nd Floor, Block D5,...."
objIE1.Document.getElementsByClassName("property-title visible-xs").getElementsByTagName ("a")
but it don't seem to get the result I need. Please help.
The html code shown is in multiple form.
This will work:
extract1 = objIE1.Document.getElementsByClassName("property-title visible-xs")(0).getElementsByTagName ("a")(0).innerText
Cells(1,1).Value = extract1
When a function has getElementsBy (plural - "Elements") such as getElementsByClassName or getElementsByTagName the code will extract a collection of elements so you need to specify which one you want, in this case it is the first which in html is 0. When a function uses getElementBy (singular - "Element") such as getElementById this extracts a single element and therefore does not need an index specification as there is no collection.

How to print html table with default header in each page

I am creating a print option on a html table.
this table has hundreds of rows. Data are fetching from php and AJAX.
After getting this data i am creating a print option like below.
function PrintElem(elem){
Popup($(elem).html());
}//
function Popup(data)
{
var mywindow = window.open('', 'my div', 'width=100%');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>/resources/css/bootstrap.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); mywindow.focus(); //newwindow.focus();
mywindow.print(); mywindow.close();
return true;
}//
<span class="trial_balance_ajax" id="print_section">
<!---- Ajax table data loads here----->
</span>
Now I am trying to print table header column in each page of printed document.
But In this case Data header only shows in first page then data overflows in others page...
I want a Default Column header in Each page
please help
What does your generated table look like? My testing indicates that if you create a table with explicit <thead> and <tbody> the header is automatically set for you:
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
<!-- Many rows... -->
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
</tbody>
</table>
In other words, the above seems to work as requested.
Edit: The requested behaviour seems to occur automatically in Firefox, but is sadly not possible to achieve without compromises in other browsers. See this related question for suggestions.
Why dont you divide rows so you can create another table having header in it.

How to embed links (anchor tag) into HTML context from UIBINDER in gwt

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