bootstrap框架中怎么让table中显示checkbox？

bootstrap框架中让table中显示checkbox的具体的方法步骤如下：

<script>

$(function () {

$("#checkAll").click(function () {

$("input[name='imgVo']:checkbox").prop("checked", this.checked)

})

})

</script>

<table class="table table-hover" style="width: 45%">

<thead>

<tr>

<th><input type="checkbox" id="checkAll"/></th>

<th>#</th>

<th>文件名</th>

<th>修改时间</th>

<th> *** 作</th>

</tr>

</thead>

<tbody>

<c:forEach var="imgVo" items="${page.list}" varStatus="st">

<tr>

<td><input type="checkbox" name="imgVo" value="${imgVo.fileName}"/></td>

<td>${st.count}</td>

<td>${imgVo.fileName}</td>

<td><fmt:formatDate value="${imgVo.modifyTime}" pattern="yyyy-MM-dd hh:mm:ss"/></td>

<td><a href="${ctx}/uploadimg/show/${imgVo.fileName}"  target="_blank">查看</a>

<a href="${ctx}/uploadimg/downloads/${imgVo.fileName}">下载</a>

</td>

</tr>

</c:forEach>

</tbody>

</table>

首先,

你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table. html在这不过多说明.

既然看这篇文章, 肯定都能够理解. 然后现在就把bootstrap中的table来详细说明一下. 基础的table如下:

下面了解一下bootstrap中table, 没有什么大道理可以讲解. 唯有一点, 通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架, 请看系列经验第一篇.

在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式. 你立刻发现, 界面瞬间好看多了.

说明一下除了必要的.table之外, 还有很多可选的class. 不同的可选class. 是可以联合使用的.

1.我们常用的就有边框的table. 只需要使用.table-bordered 查看效果图.

2.斑马线, 也就是隔行相同颜色的一个样式. 使用.table-striped样式.

注意点有2个:

(1)斑马线是对tbody中的行起作用

(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的.

3.鼠标悬停在行上, 改变行的背景颜色. 使用.table-hover样式.

注意: 这个需要多行的时候, 这种效果更加明显.

4.让表格更加紧凑的样式.table-condensed, 它是让表格单元格中的内部（padding）减半.展现更多的内容, 和更多的显示内容.

其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式. 每个样式都是一种提醒方式. 这些方式也可以放到table中. 只需要使用class即可.

上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的. 下面的举例说明.

注意点: 在使用这个样式的时候不能使用.table-striped的样式, 会出现不能正常显示的问题.

还有就是现在比较流行的响应式的table. 只需要在table包含在.table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失.

10

动手去尝试, 你发现学习bootstrap也就是这么简单.祝你更快的学会这个框架.

1.Bootstrap模态框(红色部分二者需要相同)

<button type="button" id="datatarget" class="btn btn-primary btn-sm"

data-toggle="modal" data-target="#Modales"onclick="check()">登记</button>

<div class="modal fade" id="datatarget" tabindex="-1" role="dialog"

aria-labelledby="myModalLabel">

<div class="modal-dialog" role="document"

style="width: 20%margin-top: 15%">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal"

aria-label="Close">

<span aria-hidden="true">×</span>

</button>

<h4 class="modal-title" id="myModalLabel">你确定要登记选中的记录吗</h4>

</div>

<div class="modal-body"></div>

<div class="modal-footer">

<a class="btn btn-primary" href="user/registerver.do" role="button">确定

</a>

<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

</div>

</div>

</div>

</div>

2.判断checkbox被选中的个数

<script type="text/javascript">

$("input[name='ifAll']:checked").length )

</script>

<input type="checkbox" name="ifAll">

---