Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Create a Fancy Editable Table With jQuery and Pure.CSS

DZone's Guide to

Create a Fancy Editable Table With jQuery and Pure.CSS

Using open-source components makes it really easy and quick to build powerful front-end elements for websites or apps. This tutorial will show you how you can easily create an editable table using Pure.CSS and jQuery.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Using open-source components makes it really easy and quick to build powerful front-end elements for websites or apps. In this tutorial, I’ll show you how you can 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 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://yui.yahooapis.com/pure/0.6.0/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.

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="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. 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!


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
jquery ,php ,sql databases ,css

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}