title: How to add edit and remove buttons to each row table dynamically
body: <p>I want to add <code>edit</code> and <code>remove</code> buttons in the third row of the table below whenever a row is added to the table. When the user user click <code>edit</code>, the columns cells becomes editable based on their original type (text-box and drop-down menu) and allow editing. In addition, the <code>edit</code> button adds a new <code>save</code> button after the user clicks the <code>edit</code> button. When the user clicks <code>delete</code>, the row gets deleted. I have seen a lot of previous posts but I want to use HTML and Javascript-only unless if it is not possible at all (some solutions recommend external libraries and some use JQuery).</p>
  <p>I tried several ways with no success. I will be thankful to any pointer or code snippet that simplifies this task for me.</p>
  <p>I have a database where I get and store data to but I am simplifying the code with arrays as follows.</p>
  <p>HTML:</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  
  &lt;/head&gt;
    
  &lt;body id=&quot;body&quot;&gt;   
  
  &lt;div id=&quot;wrapper&quot;&gt;
  &lt;table align='center' cellspacing=1 cellpadding=1 id=&quot;mytable&quot; border=1&gt;
  &lt;tr&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Type&lt;/th&gt;
  &lt;th&gt;Action&lt;/th&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;text&quot;&gt;&lt;/td&gt;
  
  &lt;td&gt;
      &lt;select name=&quot;levels&quot; id=&quot;levels&quot;&gt;
      &lt;option value=&quot;A&quot; id=&quot;option-1&quot;&gt;A&lt;/option&gt;
      &lt;option value=&quot;B&quot; id=&quot;option-2&quot;&gt;B&lt;/option&gt;
      &lt;option value=&quot;C&quot; id=&quot;option-3&quot;&gt;C&lt;/option&gt;
      &lt;/select&gt; 
  &lt;/td&gt;
          
  &lt;td&gt;&lt;input type=&quot;button&quot; class=&quot;add&quot; id=&quot;add-button&quot; value=&quot;Add&quot;&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;script src=&quot;get-text.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Script:</p>
  <pre><code>var myArray = [{&quot;name&quot;:&quot;aaa&quot;,&quot;level&quot;:&quot;A&quot;},{&quot;name&quot;:&quot;bbb&quot;,&quot;level&quot;:&quot;B&quot;},{&quot;name&quot;:&quot;ccc&quot;,&quot;level&quot;:&quot;C&quot;}];
  
  //to display stored data in the table 
  function display()
  {
      var table=document.getElementById(&quot;mytable&quot;);
      var length=myArray.length;
  
      for(var i=0; i&lt;length; i++)
      {
          var row = table.insertRow(i+1);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          var cell3 = row.insertCell(2);
                                  
          cell1.innerHTML = myArray[i].name;
          cell2.innerHTML = myArray[i].level;
      }//end for  
  } //end display
  
  display(); //call display.
  
  var addButton=document.getElementById(&quot;add-button&quot;); 
  
  //listen to add button. If clicked, store the entered data and append them in the display
  addButton.addEventListener('click', function (){
      event.preventDefault();
      
      //get the data from the form
      var mytext = document.getElementById(&quot;text&quot;).value;
      var mylevel = document.getElementById(&quot;levels&quot;).value;
      
      //store the entered values into the array
      myArray.name=mytext;
      myArray.level=mylevel;
      
      var length=myArray.length;
      console.log(&quot;Array Length: &quot;+length)
      
      //add the entered data to the table.
      var table=document.getElementById(&quot;mytable&quot;);
      var newRow = table.insertRow(length+1);
      var cell1 = newRow.insertCell(0);
      var cell2 = newRow.insertCell(1);
      var cell3 = newRow.insertCell(2);
                                  
      cell1.innerHTML = mytext;
      cell2.innerHTML = mylevel;
      
      mytext.value = '';
      
  }, false);
  </code></pre>
  <p>EDIT:
  I am trying to something like this in my code. <a href="http://talkerscode.com/webtricks/add-edit-and-delete-rows-from-table-dynamically-using-javascript.php" rel="nofollow noreferrer">Add, Edit, Delete from Tables Dynamically</a> but my attempts were not successful in this part.</p>