javascript - Table with dynamic number of columns -

i have table in display in first line current month , want change number of td in second line whith ng-click function. (if click next button next month , number of td in second tr become number of day of month(next month)

what ve done :

$scope.nextmonth=function(month){   var months = ["january","february","march","april","may","june","july","august","september","october","november","december"];   var nummonth = months.indexof(month);   console.log(nummonth);     if(nummois == 11){       $scope.month= months[0];     }     else {       $scope.month=months[nummonth+1];     }     $scope.nbrjrs = nbjourbymonth(nummonth,2016); }; 

this screenshot of have :

edit

and when click next button :

as can see month change number of td refers number of day in month doesn't change !! :(

in view have :

<table> <thead> <th><a href="#" onclick="previousmonth()"><</th>   <th class="col-md-4" colspan="{{nbjourbymonth(m,year)-2}}"><center>{{month}}</center></th> <th><a href="#" onclick="nextmonth()">></th>    </thead>  <tbody>     <td id="{{$index+1}}" ng-repeat="n in range(nbrjrs)">{{$index+1}}</td>   </tbody>    </table> 

and range function :

  $scope.range = function (count) {         var ratings = [];          (var = 0; < count; i++) {             ratings.push(i)         }         return ratings;     } 

when click next flech can change name of month , number of day in month number of td doesn't change (i 31 td don't know how can redraw table.) can me please ?

@akino

one option, make colspan of th (number of days in month) -2 , bind dynamically using angular.

<table>   <th><!- placeholder left nav button --></th>   <th colspan="{{currentmonthdays-2}}">{{currentmonth}}</th>   <th><!- placeholder right nav button --></th>   <tr>     <td id="{{$index+1}}" ng-repeat="n in range(nbrjrs)">{{$index+1}}</td>   </tr> </table> 

hope helps!