title: How to Enable Edit option in this javascript program
body: <p>I've a JavaScript program to add records from a Form to Table i created <code>AddRow()</code>,<code>reset()</code>,<code>DeleteRow()</code> functions in this program but I am unable to create the <code>EditRow()</code>function in this program.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addRow() {
    var id = document.getElementById("empId");
    var name = document.getElementById("name");
    var gender = document.getElementById("gender");
    var address = document.getElementById("address");
    var email = document.getElementById("mail");
    var table = document.getElementById("myTableData");
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    row.insertCell(0).innerHTML = empId.value;
    row.insertCell(1).innerHTML = name.value;
    row.insertCell(2).innerHTML = gender.value;
    row.insertCell(3).innerHTML = address.value;
    row.insertCell(4).innerHTML = mail.value;
    row.insertCell(5).innerHTML = '&lt;input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)"&gt;';
    row.insertCell(6).innerHTML = '&lt;input type="button" value = "Edit" onClick="Javacsript:EditRow(this)"&gt;';
    empId.value = "";
    name.value = "";
    gender.value = "";
    address.value = "";
    mail.value = "";
  }
  
  function EditRow(obj) {
    alert('How to implement this ?');
  }
  
  function reset() {
    var id = document.getElementById("empId");
    var name = document.getElementById("name");
    var gender = document.getElementById("gender");
    var address = document.getElementById("address");
    var email = document.getElementById("mail");
    var table = document.getElementById("myTableData");
    empId.value = "";
    name.value = "";
    gender.value = "";
    address.value = "";
    mail.value = "";
  }
  
  
  function deleteRow(obj) {
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myform"&gt;
    &lt;b&gt;Employee Information&lt;/b&gt;
    &lt;form method="post" action=""&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;ID:&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" id="empId"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Name:&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" id="name"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Gender:&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="radio" id="gender" value="male" /&gt;Male
            &lt;br&gt;
            &lt;input type="radio" id="gender" value="Female" /&gt;FeMale
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Address:&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="textarea" id="address"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Email:&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="email" id="mail" name="Email"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &amp;nbsp;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input type="button" id="add" value="Add" onclick="javascript:addRow()"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="reset" value="Reset" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="button" id="update" value="Update" onClick=""&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="mydata"&gt;
    &lt;table id="myTableData" border="1" cellpadding="2"&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;b&gt;ID&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;b&gt;Name&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;b&gt;Gender&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;b&gt;Address&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;b&gt;Email&lt;/b&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;b&gt;Action&lt;/b&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>