javascript - 具有动态列数的表

Question

我有一个表格，其中第一行显示当前月份我想用 ng-click 功能更改第二行中 td 的数量。(如果我点击下一个按钮，我会得到下个月，第二个 tr 中的 td 数量恰好变成本月(下个月)的天数

我做了什么:

$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);
};

这是我实际拥有的屏幕截图:

编辑

当我单击下一步按钮时，我得到:

正如您所看到的，月份发生了变化，但是 td 的数量(指的是该月的天数)没有变化! :(

在我看来:

<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>

这是范围函数:

  $scope.range = function (count) {
        var ratings = [];

        for (var i = 0; i < count; i++) {
            ratings.push(i)
        }
        return ratings;
    }

当我点击进入下一个 flech 时，我可以更改月份的名称，并且我还可以获取本月的天数，但 td 的数量不会改变(我得到 31 td 我不知道如何才能重新绘制表格。)有人可以帮我吗？

Answer 1

@秋野

一种选择是，您可以将 TH 的 colspan 设置为(一个月中的天数)-2，并使用 Angular 动态绑定(bind)它。

<table>
  <th><!- Placeholder for Left Nav Button --></th>
  <th colspan="{{currentMonthDays-2}}">{{currentMonth}}</th>
  <th><!- Placeholder for Right Nav Button --></th>
  <tr>
    <td id="{{$index+1}}" ng-repeat="n in range(nbrJrs)">{{$index+1}}</td>
  </tr>
</table>

希望这有帮助!