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剩余字数计算的代码
Jul 03 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python发送邮件实例分享
2017/07/28 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python shelve模块实现解析
2019/08/28 Python
Python集合操作方法详解
2020/02/09 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
师范生自我鉴定范文
2013/10/05 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
留学推荐信英文范文
2015/03/26 职场文书
宿舍管理制度范本
2015/08/07 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技