title: Append button to a table row dynamically using jquery
body: <p>I have an array of JavaScript JSON objects which is being parsed from a JSON formatted-string. Now what I'm doing is that I'm looping through the array and append the data to a table within the page.</p>
  
  <h3>jQuery Code:</h3>
  
  <pre><code>$.each(objArr, function(key, value) {
    var tr = $("&lt;tr /&gt;");
    $.each(value, function(k, v) {
      tr.append($("&lt;td /&gt;", {
        html: v
      }));
      $("#dataTable").append(tr);
    })
  })
  </code></pre>
  
  <p>The code works perfectly and the table is getting populated successfully</p>
  
  <p>But what I'm looking for is that, I want to add a delete <strong>button</strong> at the <strong>end</strong> of the row, by which the user will delete the row, and it also important to handle the click event in order to perform the required action</p>
  
  <p>I've done this in another way, but it is not that efficient, I want to use the code above to accomplish that as it is more efficient:</p>
  
  <pre><code>for (var i = 0; i &lt; objArr.length; i++) {
    var tr = "&lt;tr&gt;";
    var td1 = "&lt;td&gt;" + objArr[i]["empID"] + "&lt;/td&gt;";
    var td2 = "&lt;td&gt;" + objArr[i]["fname"] + "&lt;/td&gt;";
    var td3 = "&lt;td&gt;" + objArr[i]["lname"] + "&lt;/td&gt;";
    var td4 = "&lt;td&gt;" + objArr[i]["phone"] + "&lt;/td&gt;";
    var td5 = "&lt;td&gt;" + objArr[i]["address"] + "&lt;/td&gt;";
    var td6 = "&lt;td &gt;" + objArr[i]["deptID"] + "&lt;/td&gt;";
    var td7 = "&lt;td&gt;" + objArr[i]["email"] + "&lt;/td&gt;";
    var td8 = "&lt;td&gt;" + '&lt;button id="' + objArr[i]["empID"] + '" value="' + objArr[
        i]["empID"] + '" onclick="onClickDelete(' + objArr[i]["empID"] +
      ')"&gt;Delete&lt;/button&gt;' + "&lt;/td&gt;&lt;/tr&gt;";
    $("#dataTable").append(tr + td1 + td2 + td3 + td4 + td5 + td6 + td7 + td8);
  }
  </code></pre>
  
  <p>Any suggestions please?</p>