zoukankan      html  css  js  c++  java
  • angularjs 合并单元格

    Html:

    复制代码
    <table class="table table-striped">
      <thead>
        <tr>
          <th>国家</th>
          <th>价格(EUR)</th>
          <th>价格(CNY)</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody ng-repeat="x in tableData">
        <tr ng-repeat="y in x.list">
          <td ng-if="$index === 0" rowspan={{x.list.length}}>{{x.cnName}}</td>
          <td>{{y.eurPrice}}</td>
          <td>{{y.cnPrice}}</td>
          <td>{{y.remark}}</td>
      </tbody>
    </table>
    复制代码

    controller.js

    复制代码
    $scope.tableData = [
                  {cnName:'aaa',list:[
                                {cnPrice: '0.22',euroPrice:'0.141',remark:''},
                                {cnPrice: '0.14',euroPrice:'0.141',remark:'aa'},
                                {cnPrice: '0.35',euroPrice:'0.171',remark:'c'},
                                {cnPrice: '0.67',euroPrice:'0.51',remark:'v'}
                            ]},
                            {cnName:'bbb',list:[
                                {cnPrice: '0.22',euroPrice:'0.141',remark:''},
                                {cnPrice: '0.45',euroPrice:'0.171',remark:'c'},
                                {cnPrice: '0.67',euroPrice:'0.51',remark:'v'}
                            ]},
                            {cnName:'ccc',list:[
                                {cnPrice: '0.22',euroPrice:'0.141',remark:''},
                                {cnPrice: '0.13',euroPrice:'0.141',remark:'aa'},
                                {cnPrice: '0.35',euroPrice:'0.171',remark:''},
                                {cnPrice: '0.35',euroPrice:'0.171',remark:''},
                                {cnPrice: '0.67',euroPrice:'0.51',remark:''}
                            ]}
                        ];
    复制代码

    效果:

     

  • 相关阅读:
    Longest Mountain in Array 数组中的最长山脉
    css 解决 图片 底部 3像素问题
    获取当前年月日2020-09-30格式
    vue + elememt ui table 实现滚屏效果
    滚动字
    layui 之监听 select 的变化
    正则匹配非汉字
    layui form里的select元素动态赋值无效
    layui 之 弹框重新打开 upload无效
    GPS坐标转百度坐标
  • 原文地址:https://www.cnblogs.com/fengxiaoliu/p/8648975.html
Copyright © 2011-2022 走看看