title: Jquery for edit and delete table row
body: <p>I have written html file, where in I have created a table. So for each row I want to define add, edit and delete links.</p>
  
  <p>The code for html file is as below:</p>
  
  <pre><code>        &lt;div id="users-contain" class="ui-widget"&gt;
          &lt;h1&gt;Existing Users:&lt;/h1&gt;
          &lt;table id="users" class="ui-widget ui-widget-content"&gt;
              &lt;thead&gt;
                  &lt;tr class="ui-widget-header "&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Email&lt;/th&gt;
                      &lt;th&gt;Password&lt;/th&gt;
                      &lt;th&gt;Actions&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td class="custom-name"&gt;John Doe&lt;/td&gt;
                      &lt;td&gt;john.doe@example.com&lt;/td&gt;
                      &lt;td&gt;johndoe1&lt;/td&gt;
                      &lt;td&gt;&lt;a href=""&gt;Edit&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;span class="delete"&gt;&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;button id="create-user"&gt;
          Create new user
      &lt;/button&gt;
  </code></pre>
  
  <p>The modal for add action is as below:</p>
  
  <pre><code>        &lt;div id="dialog-form" title="Create new user"&gt;
          &lt;p class="validateTips"&gt;
              All form fields are required.
          &lt;/p&gt;
          &lt;form&gt;
              &lt;fieldset&gt;
                  &lt;label for="first_name"&gt;First Name&lt;/label&gt;
                  &lt;select id="first-name"&gt;
                      &lt;option value="1"&gt;Arun&lt;/option&gt;
                      &lt;option value="2"&gt;Ganesh&lt;/option&gt;
                      &lt;option value="3"&gt;Suresh&lt;/option&gt;
                      &lt;option value="4"&gt;Sanganabasu&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;label for="last_name"&gt;Last Name&lt;/label&gt;
                  &lt;select id="last-name"&gt;
                      &lt;option value="1"&gt;Hulagabal&lt;/option&gt;
                      &lt;option value="2"&gt;Cheemalamudi&lt;/option&gt;
                      &lt;option value="3"&gt;Ganiger&lt;/option&gt;
                      &lt;option value="4"&gt;Kattriguppe&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;label for="email"&gt;Email&lt;/label&gt;
                  &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /&gt;
                  &lt;label for="password"&gt;Password&lt;/label&gt;
                  &lt;input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the Javascript code is as below:</p>
  
  <pre><code>$(function() {
  
              var fname = $("#first-name"), lname = $("#last-name"), email = $("#email"), password = $("#password");
  
              $("#dialog-form").dialog({
                  autoOpen : false,
                  height : 300,
                  width : 350,
                  modal : true,
                  buttons : {
                      "Create an account" : function() {
                          $("#users tbody").append("&lt;tr&gt;" + "&lt;td&gt;" + (fname.find("option:selected").text()+' ').concat(lname.find("option:selected").text())+ "&lt;/td&gt;" + "&lt;td&gt;" + email.val() + "&lt;/td&gt;" + "&lt;td&gt;" + password.val() + "&lt;/td&gt;" + "&lt;td&gt;&lt;a href='' class='edit'&gt;Edit&lt;/a&gt;&lt;/td&gt;" + "&lt;td&gt;&lt;span class='delete'&gt;&lt;a href=''&gt;Delete&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;" + "&lt;/tr&gt;");
                          $(this).dialog("close");
  
                      },
                      Cancel : function() {
                          $(this).dialog("close");
                      }
                  },
                  close : function() {
                      allFields.val("").removeClass("ui-state-error");
                  }
              });
  
                $('span.delete').live('click', function() {  
                  $(this).closest('tr').find('td').fadeOut(1000, 
                      function(){ 
                          // alert($(this).text());
                          $(this).parents('tr:first').remove();                    
                      });    
  
                  return false;
              });
              $("#create-user").button().click(function() {
                  $("#dialog-form").dialog("open");
              });
          });
  </code></pre>
  
  <p>The add and delete actions are working now and I have created a <a href="http://jsfiddle.net/sangu0009/FvAuZ/" rel="nofollow noreferrer">http://jsfiddle.net/sangu0009/FvAuZ/</a> but I need to write edit action. Please help me with some solutions to how to do it. The work is more appreciated.</p>