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 相关文章推荐
JavaScript动态添加css样式和script标签
Jul 19 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
javascript数组去重方法分析
Dec 15 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
用header 发送cookie的php代码
2007/03/16 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
jsonp原理及使用
2013/10/28 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python日志记录模块实例及改进
2017/02/12 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
如何在python中实现随机选择
2019/11/02 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
施工安全协议书
2013/12/11 职场文书
开业庆典邀请函
2014/01/08 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
2015年推普周活动方案
2015/05/06 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis