Inline Cell Editing in HTML Table

(JQUERY)


Hi,
In this article i discuss about  how to add inline cell editing functionality in html table using jquery.

View:-

@{
    ViewBag.Title = "inlinecellEditing";
}

<h2>Inline Cell Editing</h2>

<table  id="tbl_customers">
    <thead>
        <tr>
<th>Customer ID</th><th>Name</th><th>Age</th><th>Account Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
<td>1</td><td>Ram</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>2 </td><td>Balu</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>3</td><td>Sidhu</td><td>25</td><td>Savings Account</td>
        </tr>
    </tbody>
 </table>


<script type="text/javascript">
    $(function () {

        var tbl = $('#tbl_customers');
        //inline cell editing for the initially loaded rows
        $(tbl).find('tbody tr td').dblclick(function () {
            var text = $(this).text();
            $(this).text("");
            var textBox = document.createElement('input');
            textBox.setAttribute('type', 'text');
            textBox.setAttribute('onkeypress', 'onKeyPress(event,this)');
            $(textBox).val(text);
            $(this).append(textBox);
        });
        //end of inline cell editing for the initially loaded rows
    });

    //for inline cell editing
    function onKeyPress(event, txtbx) {
        if (event.keyCode == 13) {
            var parentTd = $(txtbx).closest('td');
            var typedVal = $(txtbx).val();
            $(txtbx).remove();
            $(parentTd).text(typedVal);

        }
    }
</script>


Controller:-

   public ActionResult inlinecellEditing()
        {
            try
            {
                return View();
            }
            catch (Exception)
            {
            }
            return null;
        }

Image

Ratings


Average Rating: 5.00 by 2 users
Giri Prasad
7/17/2013
7/17/2013
Download PDF

Comments