My Little World

表格处理

发表于

jquery获取表格

获取行: $(“#table tr”)[val+1];
获取改行第一列: $(“#table tr”)[val+1].children[0];
表格内容：$(“#table tr td:nth-child(4)”)[val].innerText

Jquery及时获取输入数据
$(‘#username’).bind(‘input propertychange’, function () {
console.log($(“input[name=username]”).val());
var iusername = $(“input[name=username]”).val();
console.log(iusername);
});
html中用$parent.$index获取到父级的$index

多表头，一行对应多列

[相关链接]（http://www.jb51.net/web/138278.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<table class="table table-bordered table-hover no-footer">
<thead>
  <tr role="row" class="heading">
    <th colspan="2">基本信息</th>
    <th colspan="6">配送速度</th>
    <th colspan="6">服务态度</th>
  </tr>
  <tr role="row" class="heading">
      <th>配送员</th>
      <th>服务社区</th>
      <th>5星</th>
      <th>4星</th>
      <th>3星</th>
      <th>2星</th>
      <th>1星</th>
      <th>未评论</th>
      <th>5星</th>
      <th>4星</th>
      <th>3星</th>
      <th>2星</th>
      <th>1星</th>
      <th>未评论</th>
  </tr>
</thead>
<tbody ng-show="data.length>0">
  <tr role="row" ng-repeat="item in data track by $index">
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
      <td>{{item.id}}</td>
  </tr>
</tbody>
</table>

table1

一列对多行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<table class="table  table-hover table-light">
<thead>
  <tr role="row" class="heading">
    <th width="3.6%"> 订单ID </th>
    <th width="6.6%"> 社区 </th>
    <th width="6.6%"> 供应商名称 </th>
    <th width="6.6%"> 商品名称 </th>
    <th width="6.6%"> 条码 </th>
    <th width="6.6%"> 批发价 </th>
    <th width="6.6%"> 预购价 </th>
    <th width="5.6%"> 数量 </th>
    <th width="5.6%"> 收货人 </th>
    <th width="6.6%"> 联系方式 </th>
    <th width="7.6%"> 收货地址 </th>
    <th width="6.6%"> 下单时间 </th>
    <th width="6.6%"> 配送方式 </th>
    <th width="3.6%"> 状态 </th>
    <th width="14.6%"> 操作 </th>
  </tr>
</thead>
<tbody ng-if="data.length>0" ng-repeat="x in data">
  <tr role="row" class="gradeX odd" ng-repeat="y in x.orders_items">
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.order_id}}</td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.region_name}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.vendor_name}} </td>
    <td><span ng-bind="y.name"></span></td>
    <td><span ng-bind="y.barcode"></span></td>
    <td><span ng-bind="y.trade_price"></span></td>
    <td><span ng-bind="y.pre_selling_price"></span></td>
    <td><span ng-bind="y.count"></span></td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.consignee}}</td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.contacts_tel}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.address}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.order_time}}</td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> {{x.transport_desc}} </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}> <span class="label" ng-class="x.labelClass">{{x.export_status_desc}} </span> </td>
    <td ng-if="$index == 0" rowspan={{x.orders_items.length}}>
     <a class="btn btn-link font-purple-seance" href="/supply/order/{{x.order_id}}" target="view_window"><i class="fa fa-eye"></i> 详情</a>
   </td>
 </tr>
</tbody>
</table>

table2

套嵌循环，三层一列多行用js 循环拼接实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$scope.dealdata= function(val){
  if(val.length<1){
    return
  }
  var tabstring = "";
  for(var i = 0;i<val.length;i++){
    var goodslength = 0;
    for(var m = 0;m<val[i].category.length;m++){
      goodslength+=val[i].category[m].purchase.length
    }
    var str1 = "<td rowspan="+goodslength+">"+val[i].purchase_name+"</td>";
     for(var j = 0;j<val[i].category.length;j++){
        var str2 = "";
        if(j == 0){
          str2 = str1 + "<td rowspan="+val[i].category[j].purchase.length+">"+val[i].category[j].category_name+"</td>";
        }else{
          str2 = "<td rowspan="+val[i].category[j].purchase.length+">"+val[i].category[j].category_name+"</td>";
        }
        for(var k = 0;k<val[i].category[j].purchase.length;k++){
          var str3 = "";
          var item = val[i].category[j].purchase[k];
          if(k == 0){
            str3 = str2 + "<td>"+item.product_name+"</td>"+
                          "<td>"+item.product_num+"</td>"+
                          "<td>"+item.unit+"</td>"+
                          "<td>"+item.price+"</td>"+
                          "<td>"+item.total_amount+"</td>"
          }else{
            str3 = "<td>"+item.product_name+"</td>"+
                    "<td>"+item.product_num+"</td>"+
                    "<td>"+item.unit+"</td>"+
                    "<td>"+item.price+"</td>"+
                    "<td>"+item.total_amount+"</td>"
          }
          tabstring += "<tr>" + str3 + "</tr>"
        }
     }
  }
  $("#table").html(tabstring);
}

效果如下
table3

固定复杂表头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<table id="tab" cellpadding="1" cellspacing="1" border="1" align="center">
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">社区</th>
<th colspan="4" ng-repeat="x in detaildata2.title">{{x}}</th>
</tr>
<tr>
<th>订单数</th>
<th>订单金额</th>
<th>客单价</th>
<th>累计新注册用户数</th>
<th>订单数</th>
<th>订单金额</th>
<th>客单价</th>
<th>累计新注册用户数</th>
<th>订单数</th>
<th>订单金额</th>
<th>客单价</th>
<th>累计新注册用户数</th>
</tr>
<tr>
  <th colspan="2">社区合计</th>
  <th ng-repeat="x in detaildata2.total">{{x}}</th>
</tr>
<tr ng-repeat="x in detaildata2.info">
<th>{{x.id}}</th>
<th>{{x.society}}</th>
<th>{{x.orders}}</th>
<th>{{x.ordersamount}}</th>
<th>{{x.price}}</th>
<th>{{x.users}}</th>
<th>{{x.orders1}}</th>
<th>{{x.ordersamount1}}</th>
<th>{{x.price1}}</th>
<th>{{x.users1}}</th>
<th>{{x.orders2}}</th>
<th>{{x.ordersamount2}}</th>
<th>{{x.price2}}</th>
<th>{{x.users2}}</th>
</tr>
<tr>
</table>
<style type="text/css">
th
{
    text-align:center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
数据结构
$scope.detaildata2 ={
        title:[0,1,2],
        total:[1,2,3,4,5,6,7,8,9,0,11,22],
        info:[{
          id:0,
          society:"社区1",
          orders:0,
          ordersamount:50,
          price:11,
          users:35,
          orders1:0,
          ordersamount1:50,
          price1:11,
          users1:35,
          orders2:0,
          ordersamount2:50,
          price2:11,
          users2:35
          },{
          id:1,
          society:"社区2",
          orders:0,
          ordersamount:50,
          price:11,
          users:35,
          orders1:0,
          ordersamount1:50,
          price1:11,
          users1:35,
          orders2:0,
          ordersamount2:50,
          price2:11,
          users2:35
          }]
      };

效果如下
table4