<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal fade" id="dialogForRequirementSearch" role="dialog" aria-labelledby="dialogForRequirementSearchModalLabel" tabindex="-1"> <div class="modal-dialog" style="width: 95%" > <!-- style="width: 95%" --> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Requirement Details</h4> </div> <div id="requirementSearchResultDisplay" class="modal-body"> <table class="table" id="requirementTable"> <thead id="reqTableHeader"> <tr></tr> </thead> <tbody id="reqTableBody"> <tr></tr> </tbody> </table> <table class="table" id="requirementTable"> <thead > <tr> <th>#</th> <th>RM System Id</th> <th>RM Id</th> <th>RM Name</th> <th>FTS Id</th> <th>Sheet Id</th> <th>Sheet Name</th> <th>Sheet Owner</th> <th>Group Id</th> <th>Group Name</th> <th>Group Type</th> <th>Mailer</th> </tr> </thead> <tbody> <tr> <td>#</td> <td>RM System Id</td> <td>RM Id</td> <td>RM Name</td> <td>FTS Id</td> <td>Sheet Id</td> <td>Sheet Name</td> <td>Sheet Owner</td> <td>Group Id</td> <td>Group Name</td> <td>Group Type</td> <td>Mailer</td> </tr> </tbody> </table> </div> <div class="modal-footer"></div> <br> </div> </div> </div>

function displayRequirementDetails { var headerList =["displayName":"RM System ID","displayName":"RM System ID","displayName":"RM System ID","displayName":"RM System ID","displayName":"RM System ID"]; var headerHtml = ''; var dataHtml = ''; for(i in headerList){ headerHtml +="<th>" + headerList[i].displayName + "</th>"; } $('#reqTableHeader').append(headerHtml); for(i in headerList){ dataHtml+='<td>' + headerList[i].displayName+"111" + '</td>' } $('#reqTableBody').append(dataHtml); $('#dialogForRequirementSearch').modal('show'); }