title: how to add button in javascript since the data that import in the html table is from JSON file
body: <p>I am trying to add edit and delete button inside the column but the HTML table was created from JSON file and it is using for loop to print out the content. I don't know how to add extra button inside the column (green zone).</p>
  <p>The button that plan to add will be replace in the 'undefined' col.</p>
  <p>JSON code:</p>
  <pre><code>
   [
     {
        &quot;userId&quot;:&quot;ravjy&quot;, 
        &quot;jobTitleName&quot;:&quot;Developer&quot;, 
        &quot;firstName&quot;:&quot;Ran&quot;,
        &quot;lastName&quot;:&quot;Vijay&quot;,
        &quot;preferredFullName&quot;:&quot;Ran Vijay&quot;,
        &quot;employeeCode&quot;:&quot;H9&quot;,
        &quot;region&quot;:&quot;DL&quot;,
        &quot;phoneNumber&quot;:&quot;34567689&quot;,
        &quot;emailAddress&quot;:&quot;ranvijay.k.ran@gmail.com&quot;
     },
     {
        &quot;userId&quot;:&quot;mrvjy&quot;,
        &quot;jobTitleName&quot;:&quot;Developer&quot;,
        &quot;firstName&quot;:&quot;Murli&quot;,
        &quot;lastName&quot;:&quot;Vijay&quot;,
        &quot;preferredFullName&quot;:&quot;Murli Vijay&quot;,
        &quot;employeeCode&quot;:&quot;A2&quot;,&quot;region&quot;:&quot;MU&quot;,
        &quot;phoneNumber&quot;:&quot;6543565&quot;,
        &quot;emailAddress&quot;:&quot;murli@vijay.com&quot;
        }
     ]
  </code></pre>
  <pre><code>&lt;script&gt;
  fetch('employees.json')
    .then(function (response) {
      // The JSON data will arrive here
       return response.json();
    })
      .then(function (data) {
      appendData(data);
    })
    .catch(function (err) {
      // If an error occured, you will catch it here
    });
          
      function appendData(data) {
          
          //Extract Value for HTML HEADER.
          
          var col=[];
          for (var i = 0; i&lt;data.length;i++){
              for (var key in data[i]){
                  if (col.indexOf(key) === -1){
                      col.push(key);
                  }
              }
          }
          
          //Add edit and delete header
          col.push(&quot;Edit&quot;,&quot;Delete&quot;);
          
          // CREATE DYNAMIC TABLE.
          var table = document.createElement(&quot;table&quot;);
  
          // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
          
          var tr = table.insertRow(-1);                   // TABLE ROW.
  
          for (var i = 0; i &lt; col.length; i++) {
              var th = document.createElement(&quot;th&quot;);      // TABLE HEADER.
              th.innerHTML = col[i];
              tr.appendChild(th);
          }
          
             // ADD JSON DATA TO THE TABLE AS ROWS.
          for (var i = 0; i &lt; data.length; i++) {
  
              tr = table.insertRow(-1);
  
              for (var j = 0; j &lt; col.length; j++) {
                  var tabCell = tr.insertCell(-1);
                  tabCell.innerHTML = data[i][col[j]];
                  
              }
          }
          
          // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
          var divContainer = document.getElementById(&quot;myData&quot;);
          divContainer.innerHTML = &quot;&quot;;
          divContainer.appendChild(table);
      }
      
     
      
      &lt;/script&gt;
  
  
    [1]: https://i.stack.imgur.com/YpoDi.png
    [2]: https://i.stack.imgur.com/pu7SB.png
  </code></pre>