Export HTML table to CSV file

/in , /by

html-table-to-csv

Imagine you have an HTML table, for example something like this:

<table>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Geronimo</td><td>26</td><td>France</td></tr>
    <tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
    <tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>

And you want to download it as a CSV table format.

First of all, you need to transform from HTML to CSV.

	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);

After that, you can download it using Blob and a link.

    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Launch
    downloadLink.click();

Here a real example:

How to make a mobile app?

/in , , , /by

cordova-logo

In this tutorial I’m going to explain you step by step how I make phone apps using Cordova (Phonegap/Ionic) and Ubuntu.

1) Install Cordova

For those who don’t know anything about Cordova, it is an opensource platform for building multiple platforms applications using HTML, CSS and JavaScript. The main different between Cordova and Phonegap is that the second one gets the Cordova code and redistributes with some Adobe rights, now it’s free but maybe tomorrow who knows, my recommendation is to use Cordova that apart of this is always more updated!

So, first step you have to install Cordova, open a shell in Ubuntu and type:

$ sudo npm install -g cordova

Any problems? See the Cordova documentation.

2) Install Platform

After that you need to install a platform, in this example we are going to develop an Android app so you have to install the Android SDK.

I recommend you to install Android Studio that brings you the SDK and many extra tools in an user friendly access. Get Android Studio.

Once you download it and unzipped it, you have to run it the first time to install everything. If you set android-studio in your home folder, it will create an Android folder with the SDK.

3) Add Android SDK to your “PATH”

Make Android SDK accessible in your environment (system)

Open a shell and type:

$ nano ~/.bashrc

Then you need to add to your “PATH” variable where your SDK and Gradle are.

export ANDROID_SDK_ROOT=~/Android/Sdk
export PATH=${PATH}:~/Android/Sdk/tools:~/Android/Sdk/platform-tools:~/android-studio/gradle/gradle-5.1.1/bin

After that, reload bashrc, if not it will not have any effect.

$ source ~/.bashrc

Note: you need to set your own path and names for the Android SDK, I used my “home” folder and default Android Studio’s folders.

4) Install Text Editor / IDE

Use the one you feel more confortable, my favorites are: Atom and VSCodium.

5) Create your App

$ cordova create myApp
$ cd myApp
$ cordova platform add android
$ cordova run --debug --device

Now you can start programming! HTML, CSS and JavaScript files are in the “www” folder.

Remember you need to activate developer options in your Android phone.

If you have any access problem (EACCES)  to your android-studio folder.

$ chmod 777 -R ~/android-studio/

Enjoy 🙂

Here if you want you can download my Cordova logo and use it for free: Cordova logo

Which is the different between property and attribute?

/in , /by

A property is in the DOM; an attribute is in the HTML that is parsed into the DOM.

HTML Attributes

Syntax:

<body onload="foo()">

DOM Properties

Syntax:

document.body.onload = foo;

Using jQuery

If we have:

<!-- HTML -->
<input class-gns="brand">
// jQuery
$("input").attr("data-gns"); // return "brand"
$("input").prop("data-gns"); // return "undefined" because it is not in the DOM.
// It's trying to get [HTMLInputElement].data-gns

See a real example:

Blink and Webkit cannot scale SVG

/in , /by

svg

Chrome cannot scale SVG vertically or horizontally.

For this example we will use:

  • Two HTML Tags for images, one without size and the other with a height equal to double width
  • A div container with a CSS background-image
<!-- HTML -->
<img id="a" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg">

<img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"width="50px" height="100px">

<div></div>
/* CSS */
#a {
    width: 50px;
    height: 100px;
}

div {
    width: 50px;
    height: 100px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg);
    background-size: 50px 100px;
}

If you try the same code in Firefox it will work for the 3 cases, you will see a vertical strech for this example with height equal to double width. So, if you want to keep the same behaviour in all browsers, you should change size proportionally. Edit the SVG itself if you wish some width and/or height deformations.

See a real example:

Sort by table content

/in , /by

table

How can you sort any HTML table using jQuery?

Element 40 ✔
Element 2 ✔
Element 29 ✔
Element 28 ✔
Element 5 ✔

Suppose you only want to use the number.

  1. First we must sort elements
  2. After that we have to keep going deleting each element and appending again to the table with the new order
// JS
$("table tr").sort(function (a, b) {
    var a_num = $(a).children(":first-child").text().split(" ")[1];
    var b_num = $(b).children(":first-child").text().split(" ")[1];
    return parseInt(a_num) - parseInt(b_num);
}).each(function(){
    var elem = $(this);
    elem.remove();
    $(elem).appendTo("table > tbody");
});

See a real example:

Edited: improved and without jQuery.