Inline Editing Using JQuery

Here I wanted to show you the flexibility of JQuery. Below is a HTML code that generates a grid with two rows and ten columns.

1
2
3
4
5
6
7
8
9
10
11
12
<div id="container">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
    <div class="column">10</div>
</div>

When the user double clicks on any of the cell, he can edit that content. The cell value get updated when user double clicks on any other cell.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function() {
    $("#container .column").dblclick(function() {

        var content = $(this).text();
        var width = $(this).width() - 1;
        var height = $(this).height() - 4;

        var $editbox = $("<input type='text'" +
            "style='width:" + width + ";" +
            "height:" + height + ";" +
            "border:none" +
            "' value='" + content + "' />");

        $(this).empty();
        $(this).prepend($editbox);
        $editbox.focus();
        $editbox.select();

        $($editbox).bind("blur", function() {

            content = $(this).val();
            var parent = $(this).parent();
            parent.html(content);

        });

    });
});

The above code does all the trick. First we hook the Double Click event to all the DIV with class name column using this $("#container .column").dblclick(function(){...}); Inside that, we dynamically add a textbox inside the DIV and set its text value as the HTML content of the parent DIV. And also we bind the blur event of this texbox to a function, so that whenever the focus leaves from the textbox, that function is called. Then inside that function, we set the HTML content of the DIV with the Textbox value.

1
2
3
4
5
6
$($editbox).bind("blur", function() {
     content = $(this).val();
     var parent = $(this).parent();
     parent.html(content);

 });

See the working demo below