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

Posted 2023-04-11

参考技术A

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>

参考技术B

<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>

如何让bootstrap table语言包使用

参考技术A 设置如下样式是可以使表格内容居中的，没有居中的原因可能是你还设置了其他的样式（把这个样式覆盖了）： .table th, .table td text-align: center; height:38px; 你可以新建一个单独的html文件复制如下代码来测试一下： Bootstrap Table