如何为表格第三列设置rowspan？三列表格创建失败求助

我看你在构建带rowspan的三列表格时遇到了第三列效果不生效的问题，结合你提供的代码结构，咱们来一步步修复它。

首先，问题的核心在于没有正确控制带rowspan的单元格渲染时机，以及没有计算准确的合并行数。原代码的循环方式会重复渲染单元格，导致rowspan无法正常工作。

修正后的完整代码 #

JavaScript部分

angular.module('App',[]);
angular.module('App').controller('MyCtrl',function($scope){
  $scope.groups = [
    {
      "id":1,
      "members":[
        {"name":"Sue", "friend":[{"frend": "100"},{"frend": "200"}]},
        {"name":"Jane","friend":[{"frend": "300"},{"frend": "400"}]},
        {"name":"Edna","friend":[{"frend": "500"},{"frend": "600"}, {"frend": "700"}]}
      ]
    },
    {
      "id":2,
      "members":[
        {"name":"James","friend":[{"frend": "800"},{"frend": "900"}]},
        {"name":"John","friend":[{"frend": "1000"}]}
      ]
    }
  ];
  
  // 计算每个group需要合并的总行数（所有成员的好友数量之和）
  $scope.getGroupRowspan = function(group) {
    return group.members.reduce((total, member) => total + member.friend.length, 0);
  };
});

HTML部分

<div ng-app="App" ng-controller="MyCtrl">
  <table border="1">
    <tbody ng-repeat="group in groups">
      <!-- 渲染每个成员的第一行数据 -->
      <tr ng-repeat-start="member in group.members">
        <!-- 第一列：Group ID，仅在当前组的第一行渲染，合并整个组的所有行 -->
        <td ng-if="$parent.$first && $first" rowspan="{{getGroupRowspan(group)}}">
          Group {{group.id}}
        </td>
        <!-- 第二列：成员名称，仅在当前成员的第一行渲染，合并该成员的所有好友行 -->
        <td ng-if="$first" rowspan="{{member.friend.length}}">
          {{member.name}}
        </td>
        <!-- 第三列：第一个好友 -->
        <td>{{member.friend[0].frend}}</td>
      </tr>
      <!-- 渲染当前成员的剩余好友行 -->
      <tr ng-repeat-end ng-repeat="f in member.friend track by $index" ng-if="$index > 0">
        <!-- 跳过已合并的第一、第二列，仅渲染第三列的好友数据 -->
        <td ng-if="$parent.$parent.$first && $parent.$first && $index === 1" colspan="2"></td>
        <td>{{f.frend}}</td>
      </tr>
    </tbody>
  </table>
</div>

关键修复点 #

1. 计算合并行数：添加了getGroupRowspan函数，准确计算每个分组需要跨的总行数，确保第一列的rowspan数值正确。
2. 控制单元格渲染时机：使用ng-if判断，仅在需要的行渲染带rowspan的单元格（比如分组的第一行、成员的第一行），避免重复渲染导致rowspan失效。
3. 拆分循环逻辑：用ng-repeat-start和ng-repeat-end拆分成员的第一行和后续好友行，让第三列的每个好友数据能对应到正确的行，同时保留前两列的合并效果。

这样调整后，第三列就能和前两列的rowspan完美配合，实现你想要的表格布局啦。

内容的提问来源于stack exchange，提问作者test