@jquery实现动态给表格添加删除行,合并指定单元格
前端技术
动态添加行
//新增行
$("#addRowBtn").click(function(){
var rowEl=$("<tr><td><input type='checkbox' class='checkItem'/></td><td><input name='empId'></input></td><td><input name='empName'></input></td>"
+"<td><input name='gender'></input></td><td><input name='email'></input></td><td><input name='deptName'></input></td></tr>");
$("#emptTbl").append(rowEl);
});
删除指定行
//删除行
$("#delRowBtn").click(function(){
var checkItems=$(".checkItem:checked");
if(checkItems.length==0){
alert("请先选中需要删除的记录!");
}else{
$.each(checkItems,function(index,item){
$(item).parents('tr').remove();
});
}
});
合并指定列
//合并按钮点击
$("#mergeCellBtn").click(function(){
if($("#emptTbl")[0].rows.length>2){
//合并部门名
mergeCol(5);
}
});
//合并指定列
function mergeCol(colId){
var rowLength = $("#emptTbl tr").length;
var colLength = $("#emptTbl tr:first")[0].cells.length;
var b=1;
var i,beginCell,beginCellContent,curCell,curCellContent;
if(colId!==0 && colId<colLength){
for(i=2;i<rowLength;i++){
beginCell =$("#emptTbl")[0].rows[b].cells[colId];
beginCellContent=$(beginCell).context.children[0].value;
curCell =$("#emptTbl")[0].rows[i].cells[colId];
curCellContent=$(curCell).context.children[0].value;
if(beginCellContent == curCellContent){
//删除相邻行内容相同的单元格
$("#emptTbl")[0].rows[i].removeChild($("#emptTbl")[0].rows[i].cells[colId]);
//调整内容相同的首个单元格的rowSpan
$("#emptTbl")[0].rows[b].cells[colId].rowSpan++;
}else{
//单元格内容不同时,将起始位置改为当前遍历的单元格的位置
b = i;
}
}
}
}
完整测试代码jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();//获取项目名
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jquery实现动态给表格添加删除行,合并指定单元格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path%>/static/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
href="<%=path%>/static/bootstrap/bootstrap.min.css">
<script type="text/javascript"
src="<%=path%>/static/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>TEST</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button type="button" id="addRowBtn" class="btn btn-primary">新增</button>
<button type="button" id="delRowBtn" class="btn btn-danger">删除</button>
<button type="button" id="mergeCellBtn"class="btn btn-danger">合并部门</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover" id="emptTbl">
<tr>
<th><input type="checkbox" id="checkAll"/></th>
<th>empId</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
</tr>
<c:forEach items="${pageInfo.list }" var="emp">
<tr>
<td>${emp.empId}</td>
<td>${emp.empName }</td>
<td>${emp.gender=='M'?'男':'女' }</td>
<td>${emp.email }</td>
<td>${emp.department.deptName }</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">当前${pageInfo.pageNum}页,共${ pageInfo.pageSize}页,共${pageInfo.total}条记录</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="<%=path%>/emps?pn=1">首页</a></li>
<c:if test="${pageInfo.hasPreviousPage }">
<li><a href="<%=path%>/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous"> <span
aria-hidden="true">«</span>
</a></li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
<c:if test="${page_num==pageInfo.pageNum }">
<li class="active"><a href="<%=path%>/emps?pn=${ page_num}">${ page_num}</a></li>
</c:if>
<c:if test="${page_num!=pageInfo.pageNum }">
<li><a href="<%=path%>/emps?pn=${ page_num}">${ page_num}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage }">
<li><a href="<%=path%>/emps?pn=${pageInfo.pageNum+1}" aria-label="Next"> <span
aria-hidden="true">»</span>
</a></li>
</c:if>
<li><a href="<%=path%>/emps?pn=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
<script type="text/javascript">
$("#addRowBtn").click(function(){
var rowEl=$("<tr><td><input type='checkbox' class='checkItem'/></td><td><input name='empId'></input></td><td><input name='empName'></input></td>"
+"<td><input name='gender'></input></td><td><input name='email'></input></td><td><input name='deptName'></input></td></tr>");
$("#emptTbl").append(rowEl);
});
$("#checkAll").click(function(){
$(".checkItem").prop("checked",$(this).prop("checked"));
});
$("#delRowBtn").click(function(){
var checkItems=$(".checkItem:checked");
if(checkItems.length==0){
alert("请先选中需要删除的记录!");
}else{
$.each(checkItems,function(index,item){
$(item).parents('tr').remove();
});
}
});
$("#mergeCellBtn").click(function(){
if($("#emptTbl")[0].rows.length>2){
mergeCol(5);
}
});
function mergeCol(colId){
var rowLength = $("#emptTbl tr").length;
var colLength = $("#emptTbl tr:first")[0].cells.length;
var b=1;
var i,beginCell,beginCellContent,curCell,curCellContent;
if(colId!==0 && colId<colLength){
for(i=2;i<rowLength;i++){
beginCell =$("#emptTbl")[0].rows[b].cells[colId];
beginCellContent=$(beginCell).context.children[0].value;
curCell =$("#emptTbl")[0].rows[i].cells[colId];
curCellContent=$(curCell).context.children[0].value;
if(beginCellContent == curCellContent){
$("#emptTbl")[0].rows[i].removeChild($("#emptTbl")[0].rows[i].cells[colId]);
$("#emptTbl")[0].rows[b].cells[colId].rowSpan++;
}else{
b = i;
}
}
}
}
</script>
</body>
</html>