title: How to edit the row data using jQuery
body: <p>My goal is to create a program where I would add data on a table, including a DELETE and EDIT button. I have already created a code for adding a new data/row and deleting a row. My problem is I can't figure out the code on how to edit the data/row in the table. Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
          $(".add-row").click(function(){
              var id = $("#id").val();
              var name = $("#name").val();
              var gender = $("#gender").val();
              var markup = "&lt;tr&gt;&lt;td&gt;&lt;input type='checkbox' name='record'&gt;&lt;/td&gt;&lt;td&gt;" + id + "&lt;/td&gt;&lt;td&gt;" + name + "&lt;/td&gt;&lt;td&gt;" + gender + "&lt;/td&gt;&lt;/tr&gt;";
          $("table tbody").append(markup);
      });
  
      // Find and remove selected table rows
      $(".delete-row").click(function(){
          $("table tbody").find('input[name="record"]').each(function(){
              if($(this).is(":checked")){
                  $(this).parents("tr").remove();
              }
          });
  
      $(".edit-row").click(function(){
              if($(this).is(":checked")){
                  $(this).html('&lt;input type="text" value="' + $(this).html() + '"/&gt;');
          };
          });
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery Form&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/jstyle.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
      &lt;input type="text" id="id" placeholder="ID Number"&gt;
      &lt;input type="text" id="name" placeholder="Name"&gt;
      &lt;label&gt;Gender:
          &lt;select id="gender"&gt;
              &lt;option value="Male"&gt;Male&lt;/option&gt;
              &lt;option value="Female"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
      &lt;/label&gt;
      &lt;input type="button" class="add-row" value="Add Row"&gt;
  &lt;/form&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Select&lt;/th&gt;
              &lt;th&gt;ID Number&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Gender&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr hidden&gt;
              &lt;td&gt;&lt;input type="checkbox" name="record"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button type="button" class="delete-row"&gt;Delete Row&lt;/button&gt;
  &lt;button type="button" class="edit-row"&gt;Edit Row&lt;/button&gt;
  &lt;/body&gt; 
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance!</p>