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程序设计有所帮助。

Javascript 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
js断点调试经验分享
Dec 08 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
优化PHP代码的53条建议
2008/03/27 PHP
srcElement表格样式
2006/09/03 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
python求列表交集的方法汇总
2014/11/10 Python
Python编码类型转换方法详解
2016/07/01 Python
Python字典简介以及用法详解
2016/11/15 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Keras自定义IOU方式
2020/06/10 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python中random模块详解
2021/03/01 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
行政监察建议书
2014/05/19 职场文书
项目战略合作意向书
2015/05/08 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书