<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;" /> <div class="col-md-6"> <table class="table table-bordered"> <thead> <tr> </tr> </thead> </table> <br /> <table class="table table-bordered"> <thead> <tr> </tr> </thead> </table> </div> <div class="col-md-6"> <table class="table table-bordered"> <thead> <tr> </tr> </thead> </table> </div> </div> </body> </html>
var person1 = ["John Smith"]; var person2 = ["Claire Temple"]; initiateArray(person1, person2); function initiateArray(array1, array2){ var html1=""; var html2=""; for(var i=0; i<array1.length; i++){ html1+="<tr>"; html1+="<td>"+array1[i]+"</td>"; html1+="</tr>"; } for(var i=0; i<array2.length; i++){ html2+="<tr>"; html2+="<td>"+array2[i]+"</td>"; html2+="</tr>"; } document.getElementById('result1').innerHTML=html1; document.getElementById('result2').innerHTML=html2; } document.getElementById('combine').addEventListener('click', combineTable.bind(this, person1, person2)); function combineTable(array1, array2){ var combine = array1.concat(array2); var html =""; for(var i=0; i<combine.length; i++){ html+="<tr>"; html+="<td>"+combine[i]+"</td>"; html+="</tr>"; } document.getElementById('display').innerHTML=html; }