【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"> <span
								aria-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"> <span
								aria-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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果你想要实现 html 表格动态合并,可以考虑使用 JavaScriptjQuery 实现。以下是一个简单的示例: HTML 代码: ```html <table id="myTable"> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> </tr> <tr> <td rowspan="3">张三</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>85</td> </tr> <tr> <td>英语</td> <td>92</td> </tr> <tr> <td>李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>王五</td> <td>语文</td> <td>92</td> </tr> </table> ``` JavaScript 代码: ```javascript $(document).ready(function() { // 获取表格中的单元格 var cells = document.getElementsByTagName('td'); // 遍历单元格,查找需要合并单元格 for (var i = 0; i < cells.length; i++) { var rowspan = cells[i].getAttribute('rowspan'); if (rowspan) { rowspan = parseInt(rowspan); var nextRow = cells[i].parentNode.nextSibling; while (nextRow && nextRow.nodeType != 1) { nextRow = nextRow.nextSibling; } if (nextRow) { var cellToExtend = nextRow.getElementsByTagName('td')[i]; cellToExtend.setAttribute('rowspan', rowspan - 1); } } } }); ``` 这段代码使用了 jQuery 库来方便地获取表格中的单元格,然后遍历单元格,查找需要合并单元格并进合并。具体来说,对于每个具有 `rowspan` 属性的单元格,它会获取该属性的值并将其转换为整数,然后查找下一相同列数的单元格,并将其 `rowspan` 属性的值减 1。这样就实现动态合并表格的效果。 ### 回答2: 在HTML中,可以通过使用rowspan和colspan属性来实现表格动态合并。 rowspan属性用于合并,它指定了一个单元格跨越的数。例如,如果我们想要将一个单元格合并到它下面的两中,可以在这个单元格添加rowspan="2"属性。 colspan属性用于合并列,它指定了一个单元格跨越的列数。例如,如果我们想要将一个单元格合并到它右边的三列中,可以在这个单元格添加colspan="3"属性。 下面是一个示例,演示如何使用rowspan和colspan属性来合并表格中的单元格。 ``` <table> <tr> <td rowspan="2">合并</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td colspan="2">合并列</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </table> ``` 在上面的示例中,第一个单元格跨越了两,并且第三个单元格跨越了两列。 通过这种方式,我们可以根据需要动态合并表格中的单元格,使表格更加清晰和紧凑。 ### 回答3: 在HTML中,可以使用colspan和rowspan属性来实现表格动态合并。 colspan属性用于将一个单元格水平合并多个单元格。例如,如果我们想要将第一的两个单元格合并成一个,可以将第一个单元格的colspan属性设置为2。 rowspan属性用于将一个单元格垂直合并多个单元格。例如,如果我们想要将第一列的两个单元格合并成一个,可以将第一个单元格的rowspan属性设置为2。 下面是一个示例代码: ```html <table> <tr> <th colspan="2">表头</th> <th>表头</th> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td rowspan="2">单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> </tr> </table> ``` 在这个例子中,第一的第一个单元格使用了colspan="2"属性,合并了两个单元格;第一列的第一个单元格使用了rowspan="2"属性,合并了两个单元格。 使用这样的属性组合,我们可以实现不同方式的动态表格合并,使表格更加灵活多样。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值