Thursday, December 13, 2012

JQuery Editable Data Grid

A friend of mine asked me to create an editable data grid for him for his web application. In less than 5 minutes I made him one and he was very surprised to see it. He did know about the power of JQuery. It takes only 2 lines of code to convert a table into an editable data grid. The datagrid looks like below:


And the html code is:

<html>
    <head>
        <title>Editable Grid Demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".editableSpan").click(function(){
                    $(this).hide().next().show().focus();
                });
                $(".editableField").blur(function(){
                    $(this).hide().prev().show().html($(this).val());
                });
            });
        </script>
        <style>
            .editableField{
                display:none;
            }
           
           
           
            table.cbl
            {
            border-collapse:collapse;
            }
            table.cbl,table.cbl td,table.cbl th
            {
            border:1px solid black;
            }
            table.cbl tr.odd{
                background-color:#c1c1c1;
            }
        </style>
    </head>
    <body>
        <table class="cbl">
            <thead>
                <th width="150px">
                    Name
                </th>
                <th  width="150px">
                    Email
                </th>
                <th width="150px">
                    Manager
                </th>
            </thead>
            <tbody>
                <tr class="odd" height="16px">
                    <td><span class="editableSpan">Name1</span> <input type="text" name="name1" id="name1" class="editableField" value="Name1"/></td>
                    <td><span class="editableSpan">email1@abc.com</span> <input type="text" name="email1" id="email1" class="editableField" value="email1@abc.com"/></td>
                    <td>
                       
                        <select  name="manager1" id="manager1">
                           
                            <option value="John">John</option>
                           
                            <option value="Richard" selected="selected">Richard</option>
                            <option value="Mark">Mark</option>
                        </select>
                   
                    </td>
                </tr>
                <tr>
                    <td><span class="editableSpan">Name2</span> <input type="text" name="name2" id="name2" class="editableField" value="Name2"/></td>
                    <td><span class="editableSpan">email2@abc.com</span> <input type="text" name="email2" id="email2" class="editableField" value="email2@abc.com"/></td>
                    <td>
                        <select  name="manager2" id="manager2">
                           
                            <option value="John" selected="selected">John</option>
                           
                            <option value="Richard">Richard</option>
                            <option value="Mark">Mark</option>
                        </select>
                    </td>
                </tr>
                <tr class="odd">
                    <td><span class="editableSpan">Name3</span> <input type="text" name="name3" id="name3" class="editableField" value="Name3"/></td>
                    <td><span class="editableSpan">email3@abc.com</span> <input type="text" name="email3" id="email3" class="editableField" value="email3@abc.com"/></td>
                    <td>
                   
                        <select  name="manager3" id="manager3">
                           
                            <option value="John" selected="selected">John</option>
                           
                            <option value="Richard">Richard</option>
                            <option value="Mark">Mark</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><span class="editableSpan">Name4</span> <input type="text" name="name4" id="name4" class="editableField" value="Name4"/></td>
                    <td><span class="editableSpan">email4@abc.com</span> <input type="text" name="email4" id="email4" class="editableField" value="email4@abc.com"/></td>
                    <td>
                   
                        <select  name="manager4" id="manager4">
                           
                            <option value="John">John</option>
                           
                            <option value="Richard" selected="selected">Richard</option>
                            <option value="Mark">Mark</option>
                        </select>
                    </td>
                </tr>
                <tr class="odd">
                    <td><span class="editableSpan">Name5</span> <input type="text" name="name5" id="name5" class="editableField" value="Name5"/></td>
                    <td><span class="editableSpan">email5@abc.com</span> <input type="text" name="email5" id="email5" class="editableField" value="email5@abc.com"/></td>
                    <td>
                       
                        <select  name="manager1" id="manager1">
                           
                            <option value="John">John</option>
                           
                            <option value="Richard">Richard</option>
                            <option value="Mark" selected="selected">Mark</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>