Adding rows to Table dynamically

by Asmita Jadhav

HTML

<table id="processTable">
    <tr>
        <th>Process_Name</th>
        <th>Process_Status</th>
    </tr>
</table>

CSS

table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

JavaScript

var data=[
["A","Active"],
["B","Aborted"],
["c","Stopped"]
];

drawTable(data);

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#processTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData[0] + "</td>"));
    row.append($("<td>" + rowData[1] + "</td>"));
}