Create Editable Table in HTML5, Bootstrap and jQuery

Hi! Today we are going to see an interesting tutorial which is about creating editable table in html5, bootstrap and jquery. Usually, any form of organized data will be presented in as table or lists on web pages. But those tables cannot be edited by users. We can say HTML Tables are non-editable and you need the help of complex jquery plug-ins to make them editable. But thanks to HTML5, you can now easily create editable tables on the fly, without any complex coding or add-ons.

HTML5 is just enough to create an editable table, but to make this demo interesting, I'm going to use bootstrap and jquery along with it. Come, let's see how to apply inline editable option to html table element.

HTML5 Editable Table:

HTML5 has an attribute called 'contenteditable'. Setting this attribute to 'true', will make the table cell editable. You simply have to add the attribute to <td> like this,

<table>
    <tr>
        <td contenteditable="true"></td>
        <td contenteditable="true"></td>
    <tr>
</table>

This attribute can be used on any html elements such as <div>, <p>, <td> etc and enable inline editing on those elements.

Creating Editable Table in HTML5 and Bootstrap:

Let's see a demo, where we have this html table with each cell being editable. There would also be an option for the user to add a new row to the table and delete the rows from it.

For the demo I'm going to use,

1. HTML5 - To create the editable table
2. Bootstrap CSS - To make the table visually appealing
3. jQuery - To perform user actions on the table like adding row, deleting row etc.

First let's write the markup for the table.

HTML Markup:

<div id="mytable">
    <table class="table table-bordered">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th><span class="add-row glyphicon glyphicon-plus"></span></th>
        </tr>
        <tr>
            <td contenteditable="true">Kim</td>
            <td contenteditable="true">Bell</td>
            <td contenteditable="true">Senior Analyst</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
        <tr>
            <td contenteditable="true">Laurence</td>
            <td contenteditable="true">Peter</td>
            <td contenteditable="true">Technical Assistant</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
        <tr>
            <td contenteditable="true">Joe</td>
            <td contenteditable="true">Franklin</td>
            <td contenteditable="true">Accountant</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
        <!-- hidden row -->
        <tr class="hidden">
            <td contenteditable="true">NIL</td>
            <td contenteditable="true">NIL</td>
            <td contenteditable="true">NIL</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
    </table>
</div>

Above, we have created a html table with three rows of data by default. There is a Plus sign ('+') in the upper right corner of the table header for adding rows, and a 'x' mark at the end of each row indicating the option to delete rows. We have also set the contenteditable="true" for each 'td' element which makes inline editing of the cell possible.

Towards the end, there is a hidden row which will be used to clone and add a new row at the end of the table when user cliks on the '+' icon.

CSS Styles:

Next let's add some css styles so that the table looks attractive.

<style type="text/css">
#mytable {
    margin: 0 auto;
    width: 60%;
    position: relative;
}

.glyphicon {
    font-size: 20px;
}

.add-row {
    color: #32CD32;
}

.add-row:hover {
    color: #228B22;
}

.delete-row {
    color: #FF0000;
}

.delete-row:hover {
    color: #B22222;
}
</style>

Adding jQuery Script:

Finally, we need to write the jquery script to make the table respond to the user actions. Let's add two functions, one to add and the other to remove the row.

<script type="text/javascript">
$(document).ready(function() {
    // function to add row
    $('.add-row').click(function () {
        var $row = $('#mytable').find('tr.hidden').clone(true).removeClass('hidden');
        $('#mytable').find('table').append($row);
    });

    // function to remove row
    $('.delete-row').click(function () {
        $(this).parents('tr').detach();
    });
});
</script>

The first function is for adding new rows to the table. When the user clicks on the green '+' icon, the script will look for the hidden row in the table markup, duplicate it and append it to the end of the table.

Likewise, when the user clicks on red 'x' icon, the second function will delete the specific row from the table.

Inline Editing in HTML5 Table

Here is the Complete Script for the Demo:

<!DOCTYPE html>
<html>
<head>
    <title>Editable table in HTML5</title>
    <meta charset="utf-8"> 
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <style type="text/css">
    #mytable {
        margin: 0 auto;
        width: 60%;
        position: relative;
    }

    .glyphicon {
        font-size: 20px;
    }

    .add-row {
        color: #32CD32;
    }

    .add-row:hover {
        color: #228B22;
    }

    .delete-row {
        color: #FF0000;
    }

    .delete-row:hover {
        color: #B22222;
    }
    </style>
</head>
<body>
<div id="mytable">
    <table class="table table-bordered">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th><span class="add-row glyphicon glyphicon-plus"></span></th>
        </tr>
        <tr>
            <td contenteditable="true">Kim</td>
            <td contenteditable="true">Bell</td>
            <td contenteditable="true">Senior Analyst</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
        <tr>
            <td contenteditable="true">Laurence</td>
            <td contenteditable="true">Peter</td>
            <td contenteditable="true">Technical Assistant</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
        <tr>
            <td contenteditable="true">Joe</td>
            <td contenteditable="true">Franklin</td>
            <td contenteditable="true">Accountant</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
        <!-- hidden row -->
        <tr class="hidden">
            <td contenteditable="true">NIL</td>
            <td contenteditable="true">NIL</td>
            <td contenteditable="true">NIL</td>
            <td><span class="delete-row glyphicon glyphicon-remove"></span></td>
        </tr>
    </table>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // function to add row
    $('.add-row').click(function () {
        var $row = $('#mytable').find('tr.hidden').clone(true).removeClass('hidden');
        $('#mytable').find('table').append($row);
    });

    // function to remove row
    $('.delete-row').click(function () {
        $(this).parents('tr').detach();
    });
});
</script>
</body>
</html>

Read Also:

• Create Fullscreen HTML5 Video Background using CSS
• How To Connect to Remote MySQL Database using PHP
• Convert URL Text to Clickable Link using JavaScript

That explains about creating editable table with html5 and bootstrap. Though inline text editing is a cool feature, the data on the table will be gone once the page is refreshed or redirected. So, we need to use some kind of back-end logic such as php or ajax to save the user edited data. I hope you like this tutorial. Kindly share this post on your social circle. Good Day!!!