编程 Javascript

AngularJS表格样式简单设置方法示例

Posted in Javascript onMarch 03, 2017

本文实例讲述了AngularJS表格样式简单设置方法。分享给大家供大家参考，具体如下：

1、问题背景

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

2、实现源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AngularJS之表格设置样式</title>
    <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
      table,th,td{
        border-collapse: collapse;
      }
      table tr:nth-child(even){
        background-color: #F7E1B5;
      }
      table tr:nth-child(odd){
        background-color: #F1F1F1;
      }
    </style>
  </head>
  <body>
    <div ng-app="tableStyleApp" ng-controller="tableStyleController">
      <table class="table table-bordered table-condensed">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2016010101</td>
            <td>张峰</td>
            <td>23</td>
          </tr>
          <tr>
            <td>2016010102</td>
            <td>李思思</td>
            <td>22</td>
          </tr>
          <tr>
            <td>2016010103</td>
            <td>华章</td>
            <td>21</td>
          </tr>
          <tr>
            <td>2016010104</td>
            <td>孙海</td>
            <td>22</td>
          </tr>
          <tr>
            <td>2016010105</td>
            <td>胡迪</td>
            <td>20</td>
          </tr>
          <tr>
            <td>2016010106</td>
            <td>升比</td>
            <td>25</td>
          </tr>
          <tr>
            <td>2016010107</td>
            <td>柳丝丝</td>
            <td>24</td>
          </tr>
          <tr>
            <td>2016010108</td>
            <td>王武</td>
            <td>22</td>
          </tr>
          <tr>
            <td>2016010109</td>
            <td>诸葛云</td>
            <td>21</td>
          </tr>
          <tr>
            <td>2016010110</td>
            <td>刘云</td>
            <td>22</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

3、实现结果：

AngularJS表格样式简单设置方法示例

希望本文所述对大家AngularJS程序设计有所帮助。

AngularJS表格样式简单设置方法示例

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

与jquery serializeArray()一起使用的函数，主要来方便提交表单

Jan 31 Javascript

javascript实现根据iphone屏幕方向调用不同样式表的方法

Jul 13 Javascript

深入学习JavaScript中的Rest参数和参数默认值

Jul 28 Javascript

JS实现的简洁二级导航菜单雏形效果

Oct 13 Javascript

移动端点击图片放大特效PhotoSwipe.js插件实现

Aug 25 Javascript

Node.js中.pfx后缀文件的处理方法

Mar 10 Javascript

JS设置手机验证码60s等待实现代码

Jun 14 Javascript

JS中使用media实现响应式布局

Aug 04 Javascript

seaJs使用心得之exports与module.exports的区别实例分析

Oct 13 Javascript

jQuery分组选择器简单用法示例

Apr 04 jQuery

JS array数组检测方式解析

May 19 Javascript

JS实现简单控制视频播放倍速的实例代码

Apr 18 Javascript

AngularJS表格添加序号的方法

Mar 03 #Javascript

JS实现双击内容变为可编辑状态

Mar 03 #Javascript

jquery表单验证实例仿Toast提示效果

Mar 03 #Javascript

JavaScript的for循环中嵌套一个点击事件的问题解决

Mar 03 #Javascript

JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

Mar 03 #Javascript

angularjs实现下拉列表的选中事件示例

Mar 03 #Javascript

JavaScript数组迭代方法

Mar 03 #Javascript