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>
        <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 () {

                    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;


                        Cancel: function () {
                    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();




    <div id="dialog-form" title="Edit Names">
            <label for="firstname">FirstName:</label>
            <input type="text" name="firstname" id="firstname"  />
            <label for="lastname">LastName:</label>
            <input type="text" name="lastname" id="lastname"  />
        <input type="hidden" value="" id="hidIndex" />
    <div id="users-contain" class="ui-widget">
        <table id="users" class="ui-widget ui-widget-content">
            <tr class="ui-widget-header ">
                <td><input type="button" id="btnEdit_1" value="Edit" class="edit" /></td>
                <td><input type="button" id="btnEdit_2" value="Edit" class="edit" /></td>
                <td><input type="button" id="btnEdit_3" value="Edit" class="edit" /></td>



Bill said...

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

Real 19 said...


Post a Comment