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 相关文章推荐
js/jquery判断浏览器的方法小结
Sep 02 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
node跨域请求方法小结
Aug 25 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 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
You might like
php 无限分类的树类代码
2009/12/03 PHP
php简单的上传类分享
2016/05/15 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python 消费 kafka 数据教程
2019/12/21 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
Linux的主要特性
2014/10/06 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
2014年高三毕业生自我评价
2014/01/11 职场文书
入党自我评价范文
2014/02/02 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Python道路车道线检测的实现
2021/06/27 Python
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
python字符串的一些常见实用操作
2022/04/06 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL