表格数据展示与操作-优快云博客

本文链接：https://blog.youkuaiyun.com/boboTEl/article/details/79231104

<body>
<div style="margin-top: 40px;margin-left: 5%;margin-right: 5%">
	<table class="table table-hover">
		<tr>
			<td><input type="checkbox" οnchange="selectAll()" id="che"></td>
			<td>ID</td>
			<td>起始时间</td>
			<td>终止时间</td>
			<td>工作单位</td>
			<td>工作部门</td>
			<td>职务/职称</td>
			<td>操作</td>
		</tr>
		<c:if test="${works!=null }">
			<c:forEach items="${works }" var="work" varStatus="aa">
				<tr>
					<td><input type="checkbox"></td>
					<td>${aa.count }</td>
					<td><fmt:formatDate value="${work.wStarttime }" pattern="yyyy-MM-dd"/></td>
					<td><fmt:formatDate value="${work.wEndtime }" pattern="yyyy-MM-dd"/></td>
					<td>${work.wWorkunit }</td>
					<td>${work.wDeparent }</td>
					<td>${work.wDuty }</td>
					<td>
						<button type="button" class="btn btn-success">编辑</button>
						<button type="button" class="btn btn-danger"> 删除</button>
					</td>
				</tr>	
			</c:forEach>
		</c:if>	
	</table>
</div>
<script type="text/javascript">
	function selectAll(){
		var isCheck = $("#che").is(':checked');
		$("input[type='checkbox']").each(function(){
			this.checked = isCheck;
		});
		
	}
</script>
</body>

checkbox全选反选