angular，左右滑动的表格
篇一：bootstrap,angularjs和jq综合制作一个完整的表格如何用angularjs制作一个完整的表格
首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。
整体代码预览：
HTML：
<!DOCTYPE html
<html lang=en ng-app=myModule
<head
//需要自行引入BOOTStrap，angularjs和jQuery的js，css文件
<style
.pagination .num{
font-size:22px;color:red;
}
.text{
margin:0 auto;
border:1px solid #ccc;
width:100%;
max-width:200px;
}
</style
<title欢迎</title
</head
<body ng-controller=myCtrl
<div class=block
<div class=navbar navbar-inner block-header
<div class=muted pull-left{{kaohzbTitle}}</div
</div
<div class=span12 style=float:left;
<div class=table-toolbar
<button style=margin-left: 5p
x; id=refresh ng-click=refresh()
class=btn btn-success
<i class= icon-refresh icon-white</i 刷新
</button
<button ng-disabled=isdisabled class=btn ng-class={'btn-info':isInfo} id=savekaohzb ng-click=save()
<i class=icon-edit icon-white</i 保存
</button
</div
</div
<div class=row-fluid
<div class=span6</div
<table class=table table-striped table-bordered table-hover
id=example style=margin-top:10px;
<thead
<tr
<th style=width: 20px; rowspan=2全选<br<input type=checkbox ng-model=selectAll</th <th style=text-align: center; width: 50px;vertical-align: middle rowspan=2序号</th
<th style=text-align: center; width: 150px;vertical-align: middle rowspan=2名称</th
<th style=text-align: center; width: 150px;vertical-align: middle rowspan=2日期</th
<th style=text-align: center; width: 150px; colspan=3比赛队伍（红）</th
<th style=text-align: center; width: 150px; colspan=3比
赛队伍（蓝）</th
<th style=text-align: center; width: 150px;vertical-align: middle rowspan=2比分</th <th style=text-align: center; width: 150px;vertical-align: middle rowspan=2说明</th
<th style=text-align: center; width: 150px;vertical-align: middle rowspan=2玩家支持队伍</th </tr
<tr
<th style=text-align: center; width: 80px；第一场</th  <th style=text-align: center; width: 80px；第二场</th  <th style=text-align: center; width: 80px；说明</th
<th style=text-align: center; width: 80px；第一场</th  <th style=text-align: center; width: 80px；第二场</th  <th style=text-align: center; width: 80px；说明</th
</tr
</thead
<tbody ng-click=fun() id=page ng-show=isshow
<!--track by tb.id--
<tr ng-repeat=tb in saveDate<!-- 只用angularjs实现点击一行就选中暂时无法实现-- <td style=width: 20px;<input type=checkbox ng-checked=selectAll</td  <td style=text-align:center;{{tb.id}}</td
<td style=text-align:center;{{tb.zbname}}</td
<td style=text-align:center;{{tb.zbtime}}</td
html如何设置图片滚动
<td style=text-align:center;{{tb.zbrul1}}</td
<td style=text-align:center;{{tb.zbrul2}}</td
<td style=text-align:center;<div class=text contenteditable=true
ng-model=tb.por</div</td
<td style=text-align:center;{{tb.zbrul2}}</td
<td style=text-align:center;{{tb.zbrul1}}</td <td style=text-align:center;<div class=text contenteditable=true
ng-model=tb.por</div</td<!-- 2016.1.19通过可编译的div来代替输入框--
<td style=text-align:center;{{tb.score}}</td
<td style=text-align:center;<div class=text contenteditable=true
ng-model=tb.por</div</td
<td
<select name= id= ng-change=changetype(adds) ng-model=adds
style=text-align:center;width:100%;min-width:80px;margin

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。