Extracting Contents of an HTML 5 Table using jQuery

Lets say you have a table with some data like the one below and you’re trying to extract the contents of only a single column (username). For a table with only 5 rows, you can simple copy and paste each username. Imagine if you have a 500 or 5000 row table with usernames, status etc. It would be time consuming to copy them line by line. I have the solution for you!

fsilo active 5 hours 6 min never edit
cure active 23 hours 46 min never edit
gpopot active 1 day 3 hours never edit
jkupul active 6 days 53 min never edit
cporiambep active 1 week 4 hours never edit
svincent active 1 week 1 day never edit

You can do all these using Javascript and jQuery. Any version of jQuery will do. jQuery should be loaded in your web browser by default. So…

Step 1: Inspector Tool

Navigate to the page where the table is located and launch the developer tools. You can do this by pressing “CTRL”+”SHIFT”+”I”.

Using the inspector tool, get the class name of the element you’re trying to extract the contents from. In my case here, I would like to extract the usernames so my class name now would be “username”. Below is an example of the <td></td> elements in a <tr></tr> of the table.

<td class="username">jkupul</td>
<td class="status">active</td>
<td class="member-for">6 days 53 min</td>
<td class="last-access">never</td>
<td class="operations">edit</td>

Step 2: JavaScript Console

On the developer tools window, look for where it says console and click on it. This will show the JavaScript console. Type jQuery and press enter. You should get something like this: function (a,b){return new d.fn.init(a,b,g)}

It shows that jQuery is loaded into the browser console and its ready for use.

Step 3: Hacking

For this step, I will show the code first and then explain what it does.

var usernames = jQuery('.username').contents().clone()

First we get the names and store them in an array. That’s what we’re here for right? So we’re almost done here. It is important to note the .clone() method. This method ensures that we do not remove the content’s from the list but have their clones stored in the usernames array. Next,

jQuery("#footer").append("<ul class='user-list' style='list-style: none'></ul>")

This adds an un-ordered list element with the class name ‘user-list’ to the footer div of the page. This is where we will list the usernames that we stored in the usernames variable above.

for (var i=0; i<usernames.length; i++) {
    jQuery('.user-list').append('<li class="user"></li>');

The for loop above loops through the usernames array and adds the username to the un-ordered list defined above. And you should be done.

Now you can easily copy the data and transfer it on to the next process of your work.

Contact me if you need any help/advice. I don’t charge.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s