Creating dynamic Columns in table

http://stackoverflow.com/questions/29435675/add-colspan-to-last-cell-of-dynamic-table-row-if-row-has-fewer-columns

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<table id="setTable" class='table table-striped table-bordered'>
    
   
    
    
</table>

<button id="showsecondtable">Display Second Table</button>
<button id="showfirsttable">Display First Table</button>

JavaScript

var table_one = [
        
    ['valueOne','valueTwo','valueThree','valueFour'],
    ['valueFive','valueSix','valueSeven','valueEight'], 

];
     
var table_two = [
        
    ['valueOne','valueTwo','valueThree'],
    ['valueFive','valueSix','valueSeven'] 

];
     
var table_header=['Column1','Column2','Column3','Column4'];
     
     
     $(document).ready(function(){

       createTableOne();
         
$('#showsecondtable').click(function(){
      clearTableData();
   createTableTwo();
   
    
});

$('#showfirsttable').click(function(){
   clearTableData();
    createTableOne();
});

    });

function createTableOne(){
   $("#setTable").html("<tr><th>"+table_header[0]+"</th><th>"+table_header[1]+"</th><th>"+table_header[2]+"</th><th>"+table_header[3]+"</th><th>"+'hellow'+"</th></tr>");
    $.each(table_one,function(keys,values){
     $("#setTable").append("<tr><td>"+values[0]+"</td><td>"+values[1]+"</td><td>"+values[2]+"</td><td>"+values[3]+"</td></tr>");
    });
}

function createTableTwo(){
   $("#setTable").html("<tr><th>"+table_header[0]+"</th><th>"+table_header[1]+"</th><th>"+table_header[2]+"</th><th>"+hello+"</th></tr>");
    $.each(table_one,function(keys,values){
     $("#setTable").append("<tr><td>"+values[0]+"</td><td>"+values[1]+"</td><td>"+values[2]+"</td><td>"+values[3]+"</td><tr<td>"+values[4]+"</td></tr>");
    });
}

function clearTableData(){
    $("#setTable").find('tr').remove();
};