AngularJS之表格设置样式

我不是女神ヾ 2022-07-15 04:17 287阅读 0赞

1、问题背景

  1.  AngularJS表格table，利用样式设置表格间隔色

2、实现源码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>AngularJS之表格设置样式</title>
  6.         <link rel="stylesheet" href="../css/bootstrap.css" />
  7.         <script src="http://cdn.static.runoob.com/libs/angular.j/1.4.6/angular.min.js"></script>
  8.         <style>
  9.             table,th,td{
  10.                 border-collapse: collapse;
  11.             }
  12.             table tr:nth-child(even){
  13.                 background-color: #F7E1B5;
  14.             }
  15.             table tr:nth-child(odd){
  16.                 background-color: #F1F1F1;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div ng-app="tableStyleApp" ng-controller="tableStyleController">
  22.             <table class="table table-bordered table-condensed">
  23.                 <thead>
  24.                     <tr>
  25.                         <th>序号</th>
  26.                         <th>姓名</th>
  27.                         <th>年龄</th>
  28.                     </tr>
  29.                 </thead>
  30.                 <tbody>
  31.                     <tr>
  32.                         <td>2016010101</td>
  33.                         <td>张峰</td>
  34.                         <td>23</td>
  35.                     </tr>
  36.                     <tr>
  37.                         <td>2016010102</td>
  38.                         <td>李思思</td>
  39.                         <td>22</td>
  40.                     </tr>
  41.                     <tr>
  42.                         <td>2016010103</td>
  43.                         <td>华章</td>
  44.                         <td>21</td>
  45.                     </tr>
  46.                     <tr>
  47.                         <td>2016010104</td>
  48.                         <td>孙海</td>
  49.                         <td>22</td>
  50.                     </tr>
  51.                     <tr>
  52.                         <td>2016010105</td>
  53.                         <td>胡迪</td>
  54.                         <td>20</td>
  55.                     </tr>
  56.                     <tr>
  57.                         <td>2016010106</td>
  58.                         <td>升比</td>
  59.                         <td>25</td>
  60.                     </tr>
  61.                     <tr>
  62.                         <td>2016010107</td>
  63.                         <td>柳丝丝</td>
  64.                         <td>24</td>
  65.                     </tr>
  66.                     <tr>
  67.                         <td>2016010108</td>
  68.                         <td>王武</td>
  69.                         <td>22</td>
  70.                     </tr>
  71.                     <tr>
  72.                         <td>2016010109</td>
  73.                         <td>诸葛云</td>
  74.                         <td>21</td>
  75.                     </tr>
  76.                     <tr>
  77.                         <td>2016010110</td>
  78.                         <td>刘云</td>
  79.                         <td>22</td>
  80.                     </tr>
  81.                 </tbody>
  82.             </table>
  83.         </div>
  84.     </body>
  85. </html>

3、实现结果

![Image 1][]

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

    相关 AngularJS动态切换样式

    AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。 本文实现的是点击某个标题，标题字体加粗，并随之切换相

    比眉伴天荒比眉伴天荒/ 0 赞/ 256 阅读