<!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>
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.
Subscribe to:
Post Comments (Atom)
1 comments:
if i want get data from database,
how could i modify ?
Post a Comment