编程 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 相关文章推荐

IE和Firefox在JavaScript应用中的兼容性探讨

Apr 01 Javascript

input 输入框内的输入事件详细分析

Mar 17 Javascript

jQuery实现原理的模拟代码 -6 代码下载

Aug 16 Javascript

jquery 模板的应用示例

Nov 12 Javascript

jQuery-ui引入后Vs2008的无智能提示问题解决方法

Feb 10 Javascript

IE下双击checkbox反应延迟问题的解决方法

Mar 27 Javascript

理解javascript中的回调函数(callback)

Sep 02 Javascript

在JavaScript中处理时间之setMinutes()方法的使用

Jun 11 Javascript

在Vue组件化中利用axios处理ajax请求的使用方法

Aug 25 Javascript

vue中实现在外部调用methods的方法(推荐)

Feb 08 Javascript

babel的使用及安装配置教程

Feb 22 Javascript

解决LayUI表单获取不到data的问题

Aug 20 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