【jquery实现动态给表格添加删除行，合并指定单元格】

@jquery实现动态给表格添加删除行，合并指定单元格

前端技术

jsp
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"><!--路径问题不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出现问题而以/开始的相对路径，找资源，是以服务器的  路径为基准（http://localhost:8080/） ,需要加上项目名http://localhost:8080/ssm-crud01-->
<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"> <spanaria-hidden="true">&laquo;</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"> <spanaria-hidden="true">&raquo;</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(){//获取原始dom节点的属性用prop，获取元素的动态添加的自定义属性时用attr$(".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]);//调整内容相同的首个单元格的rowSpan$("#emptTbl")[0].rows[b].cells[colId].rowSpan++;}else{//单元格内容不同时，将起始位置改为当前遍历的单元格的位置b = i;}}}}</script>
</body>
</html>