Tutorial: Create a fancy editable table with jQuery and PureCss

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 Yahoo’s servers. So just paste the following in the <head> section of the index.html file you just created:

<link rel="stylesheet" href="http://bit.ly/23IdmyM;>

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.

All good? Now, let’s play a bit with those nifty tools.

The HTML

Since we’re going to create an editable table, the thing to do right now is obviously… to create a 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 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 it’s still very static. Thanks to jQuery and the editableTableWidget plugin, we are going to make it editable.

The first thing to do is to link to jQuery, since the plugin we’re gonna use 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="http://bit.ly/23IdkqM;></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. Have a look at what you created: the table is now editable.

Going further

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.

Ultimately, there are strong chances that you’d like to store the entered values 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.

That’s all for today. Hope you enjoyed this tutorial! Don’t hesitate to subscribe to CatsWhoCode newsletter to make sure you won’t miss any upcoming posts!

Thanks to: CatsWhoCode.com Permanent link

Pages

Ondras [DEV]