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=[
["Process_Name":"A","Process_Status":"Active"],
["Process_Name":"B","Process_Status":"Aborted"],
["Process_Name":"c","Process_Status":"Stopped"]
];

/*
var data=[
{"Process_Name":"A","Process_Status":"Active"},
{"Process_Name":"B","Process_Status":"Aborted"},
{"Process_Name":"c","Process_Status":"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.Process_Name + "</td>"));
    row.append($("<td>" + rowData.Process_Status + "</td>"));
}