Tutorial: Create an editable table with jQuery and Pure CSS

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Using open-source components makes it really easy and quick to build powerful front-end elements for websites or apps. In this tutorial, you’ll learn how to easily create an editable table using PureCSS and jQuery.

There’s a demo available for this tutorial, click here to see.

Getting Started

The very first thing to do, indeed, is to create a index.html document on your server or local drive. Paste the following base code into the newly created document, and then save it.

 <!doctype html>  <html lang="en"> <head>   <meta charset="utf-8">   <title>Editable table</title>   <style>     body{ padding: 1% 3%; color: rgb(119, 119, 119); }     h1{ color:#333 }   </style> </head>  <body> <h1>Editable table example</h1>  </body> </html>

We now have to get the free tools we’re gonna use in this tutorial. The first one is called Pure CSS. It’s a very light CSS framework, ideal for small projects. You don’t need to download this one, since it can be directly linked from Cloudflare’s servers. So just paste the following in the <head> section of the index.html file you just created:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">

The second tool we’re going to use is a simple and sweet jQuery plugin named editableTableWidget. Download the .js file here and drop it on your web server or local hard drive, in the same directory as the index.html file you created. No other jQuery plugin is required.

The HTML Table

Since we’re going to create an editable HTML table, the thing to do right now is obviously… to create an HTML table.

Here is the one we’re gonna use in this tutorial. It needs to be pasted in the <body> section of your index.html document:

 <table id="editable" class="pure-table pure-table-bordered">     <thead>         <tr>             <th>#</th>             <th>Make</th>             <th>Model</th>             <th>Year</th>         </tr>     </thead>      <tbody>         <tr>             <td>1</td>             <td>Honda</td>             <td>Accord</td>             <td>2009</td>         </tr>          <tr>             <td>2</td>             <td>Toyota</td>             <td>Camry</td>             <td>2012</td>         </tr>          <tr>             <td>3</td>             <td>Hyundai</td>             <td>Elantra</td>             <td>2010</td>         </tr>     </tbody> </table>

Have a look at your index.html document: thanks to Pure CSS, our very basic HTML table looks elegant and professional.

If you’d like more information on what Pure CSS can do for your HTML tables, be sure to check out the related documentation.

Adding jQuery

Our table looks fine, but for now cells can’t be edited. Using jQuery and the editableTableWidget jQuery plugin, we are going to make the table editable.

The first thing to do is to link to jQuery since the editableTableWidget plugin depends on it. You can either use your own copy of jQuery, or link from Google CDN, as I did below. We also have to link to the mindmup-editabletable.js file we downloaded previously.

Insert the following code in your index.html document, just above the closing </body> tag.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>  <script src="mindmup-editabletable.js"></script>

Once done, you simply have to make the HTML table editable as shown below. This code goes straight below the scripts you just added.

 <script> 	$('#editable').editableTableWidget(); </script>

That’s it. Refresh the index.html file and have a look at the result: You just made the table editable.

Creating Uneditable cells

Now that we have a fully functional editable table, let’s go a bit further and see what we can do to make it better. The first thing would be to make sure that specific cells can’t be edited. No big deal here, we simply have to add a class to any <td> element:

<td class="uneditable">...</td>

And then, use the following JavaScript to detect changes on uneditable cells, and prevent it:

 $('#editable td.uneditable').on('change', function(evt, newValue) { 	return false; });

If you want to test this on the demo, try to edit the cell that reads “2010” on the bottom right of the table: as you can see, the value of the cell cannot be edited.

Saving Data To Your Database

Ultimately, there are strong chances that you’d like to store the values from the HTML table into a database. The easiest solution for this would be to use jQuery and Ajax to automatically send the values to a PHP script which will take care of dealing with the data and storing it into a database.

That’s very simple to do, actually, using the jQuery .post() method:

 $('#editable td').on('change', function(evt, newValue) { 	$.post( "script.php", { value: newValue }) 		.done(function( data ) {     			alert( "Data Loaded: " + data ); 		});	 	; });

On line 1, we’re using an event listener to check if the value has been changed by the user. If yes, a .post() request containing the newValue variable is sent to a PHP script (script.php, not included in this tutorial) on the server.

Frequently Asked Questions

jQuery Plugin

Does This Code Works With Bootstrap?

Absolutely, this code can easily be adapted to Bootstrap or other CSS Frameworks. You just need to add an id to the table, and then call the editableTableWidget() method on it to make your HTML table editable:

$('#your-table').editableTableWidget();

Can I Have Multiple EDitable HTML Tables On The Same Page?

Yes. To do so, the easiest way would be to add a class on your tables, and subsequently call the editableTableWidget() method:

$('.editable').editableTableWidget();

Original Article

More to explorer

Developing Dyno: Below the Surface

Ever wonder what’s going on behind the scenes of a successful business? Each developing business has a different journey. Let’s dig a little deeper as we explore below the surface of Dyno Creative and discover what makes them so dang special!

In a creative funk? Unexpected Inspiration

In a creative funk? Step out of your comfort zone and say hello to the power of unexpected inspiration as you rediscover the world around you. Sometimes there’s just nothing better than spending some quality time with quality people, to center our thoughts and refocus our priorities.

How to Be Seen in a Crowded Marketplace

Don’t let the challenges of standing out in a competitive market get you down. Dyno Creative simplifies the process of brand recognition into 5 easy steps, allowing you to focus on building stronger customer relations while simplifying the buying process.

Receive the latest news

Subscribe To Our Weekly Newsletter

Get notified about new articles.