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.
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
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();
