1、问题背景
AngularJS表格table，利用样式设置表格间隔色
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS之表格设置样式</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script src="http://cdn.static.runoob.com/libs/angular.j/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表格样式简单设置方法。分享给大家供大家参考，具体如下： 1、问题背景 AngularJS表格table，利用样式设置表格间隔色 2、实现源码 <!DOCTYPE html> <html> <head> <...
AngularJS的核心概念之一是数据绑定，它允许开发者在视图（View）和模型（Model）之间建立直接的联系。在这个场景下，我们可以通过数组来存储表格的数据，然后在HTML模板中使用AngularJS的指令来动态生成表格的行...
首先，让我们来看一个基础的AngularJS表格实例。在以下代码中，`ng-repeat`指令用于遍历`names`数组，并将每个对象的`Name`和`Country`属性分别显示在表格的单元格中： ```html <td>{{ x.Name }} <td>{{ x....
在本文中，我们将深入探讨如何使用AngularJS实现表格部分列的展开和缩起功能。AngularJS是一个强大的前端JavaScript框架，由Google开发，用于构建单页应用程序（SPA）。它通过指令和表达式增强了HTML，使数据绑定变...
在给定的压缩包"angularjs表格内容搜索过滤代码.zip"中，包含的是一个使用AngularJS实现的表格搜索和过滤功能的示例代码。 这个项目是基于AngularJS 1.3.4版本的，这是一个较早但仍然广泛使用的版本。AngularJS 1.x...
本文详解的AngularJS表格分页功能，从代码实现和思路角度出发，适用于初学者理解和实践。 **核心知识点一：分页原理** 分页功能的基本思想是将数据集合分割成若干个子集，每个子集代表一页。对于前端分页，通常的...
├最新AngularJS开发宝典—第030讲 弹性盒模型+bootStrap 开发微信菜单前端之使用fontawesome设置ui界面.mp4 ├最新AngularJS开发宝典—第031讲 弹性盒模型+bootStrap 开发微信菜单前端之underscore与lodash前端库...
总结以上知识点，AngularJS表格的创建包括使用HTML标准标签配合AngularJS指令，数据的动态绑定利用ng-repeat和ng-model实现，通过内联CSS或外部样式表设置样式来改善表格的外观。这些技术和方法的结合使用，使得在...
本文将探讨AngularJS中table表格的基本操作，包括动态添加样式、使用内置指令进行条件渲染等。通过这些知识点，开发者能够更高效地处理表格数据和展示，并提供更好的用户体验。 首先，来看看AngularJS中如何对表格...
8. **自定义样式**：由于描述中提到“设置Mint数据的样式”，开发者可能使用CSS或者AngularJS的`ng-style`指令来实现特定的样式，使数据呈现Mint风格，这可能包括颜色主题、字体、布局等。 9. **AJAX请求**：为了...
1. **双向数据绑定**：AngularJS 的核心特性之一，允许视图和模型之间保持同步，无需手动操作DOM进行数据更新。 2. **模块化**：AngularJS 应用以模块的形式组织，便于代码管理和重用。在这个后台管理模板中，可能...
ng-table是AngularJS的一个插件，专门用于在Web应用中展示数据表格，提供了丰富的功能和高度可定制性。 ng-table的核心功能包括： 1. 数据绑定：ng-table允许开发者轻松地将数据模型与表格视图进行绑定，实时更新...
首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。 正文： HTML部分 生成表格比较简单，主要是通过angularjs的数据...
在本项目中，Bootstrap将用于美化界面，创建用户友好的表单、按钮和表格，同时实现跨设备兼容性，提高用户体验。 ngRoute是AngularJS的一个插件，用于实现路由管理，它使得在SPA中实现页面跳转和状态管理变得简单。...
最后，为了使页面看起来更美观，可以引入Bootstrap等前端库，如本例中的`bootstrap.min.css`，以提供基本的表格样式。 总结起来，AngularJS的`orderBy`过滤器提供了一种便捷的方式来实现表格按指定列排序的功能。只...
在AngularJS中，SQL（Structured Query Language）的集成主要用于与后端数据库进行交互，以便获取、更新、删除或插入数据。在本入门教程中，我们将深入理解如何在AngularJS应用程序中使用SQL，以及如何通过HTTP服务...
这样可以根据项目需求定制日期选择器的样式和行为，如设置日期格式、禁用特定日期等。 6. **事件监听**: 在使用DatePicker时，需要监听相关的UI-Grid事件，如`cellnav:activated`和`edit:complete`，以便在用户选择...
`$scope`是AngularJS中用于绑定视图和控制器数据的对象，而`ngTableParams`是ng-table的核心对象，用于设置和管理表格的参数。 ```javascript var app = angular.module('main', ['ngTable']) .controller('...
总结来说，通过ng-repeat和$index变量的结合使用，可以在AngularJS表格中轻松添加行序号，并且通过简单的CSS样式来提升表格的外观。这对于开发Web应用中的数据展示界面特别有用。同时，借助Bootstrap框架和其他...