Tuesday, June 14, 2011

Edit html table using jquery ui modal dialog

jquery ui is awesome, I used the jquery and jquery ui hosted on google CDN and made an example to show how to edit the html table using jquery ui modal dialog.
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" rel="stylesheet" type="text/css" />
       
        <!-- jQuery UI Themes: base,black-tie,blitzer,cupertino,dark-hive,dot-luv,eggplant,excite-bike -->
        <!-- flick,humanity,le-frog,Smoothness,Sunny,start,Vader,ui-darkness... -->

        <script type="text/javascript">

            $(document).ready(function () {
                $("#dialog:ui-dialog").dialog("destroy");

                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 250,
                    width: 300,
                    modal: true,
                    buttons: {
                        "Submit": function () {

                            var fname = $("#firstname").val();
                            var lname = $("#lastname").val();
                            var index = $("#hidIndex").val();
                         
                            var row = $("#users tbody tr:nth-child(" + parseInt(index) + ")");
                            row.find(':nth-child(1)').get(0).innerHTML = fname;
                            row.find(':nth-child(2)').get(0).innerHTML = lname;

                            $(this).dialog("close");

                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () { }
                });

                $(".edit").button().click(function () {

                    var index = $(this).attr("id").split("_")[1];

                    var row = $("#users tbody tr:nth-child(" + parseInt(index) + ")");
                    var fname = row.find(':nth-child(1)').text();
                    var lname = row.find(':nth-child(2)').text();

                    $("#firstname").val(fname);
                    $("#lastname").val(lname);
                    $("#hidIndex").val(index);

                    $("#dialog-form").dialog("open");

                });
            });

        </script>
    </head>
    <body>
    <div id="dialog-form" title="Edit Names">
        <fieldset>
            <label for="firstname">FirstName:</label>
            <input type="text" name="firstname" id="firstname"  />
            <label for="lastname">LastName:</label>
            <input type="text" name="lastname" id="lastname"  />
        </fieldset>
        <input type="hidden" value="" id="hidIndex" />
    </div>
    <div id="users-contain" class="ui-widget">
        <h1>Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>FirstName</th>
                <th>LastName</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ema</td>
                <td>Russi</td>
                <td><input type="button" id="btnEdit_1" value="Edit" class="edit" /></td>
            </tr>
            <tr>
                <td>Jack</td>
                <td>Loren</td>
                <td><input type="button" id="btnEdit_2" value="Edit" class="edit" /></td>
            </tr>
            <tr>
                <td>Dean</td>
                <td>shaun</td>
                <td><input type="button" id="btnEdit_3" value="Edit" class="edit" /></td>
            </tr>
        </tbody>
    </table>
    </div>

    </body>
</html>

2 comments:

Bill said...

if i want get data from database,
how could i modify ?

Real 19 said...

Thanks!

Post a Comment