一个简单jqueryAjax前端页面展示

最新推荐文章于 2024-06-07 15:37:18 发布

格乄子

最新推荐文章于 2024-06-07 15:37:18 发布

阅读量1.9k

点赞数 1

分类专栏： js+jquery 文章标签： jqueryAjax jquery元素remove 动态添加的按钮点击事件处理

本文链接：https://blog.csdn.net/gezi2015129/article/details/62426723

版权

js+jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>lattice</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">
  </head>
   <script src="<%=path %>/static/js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <%-- <script src="<%=path %>/static/jquery-3.1.1.js" type="text/javascript"></script> --%>
  <script type="text/javascript">
  	$(function(){
  		$("#btn1").click(function(){
  			//alert("111");
  			var url="<%=path%>/test/lattice";
  			var args={"name":"lattice","age":18};

  			$.post(url,args,function(data){//以post方式使用ajax来从后台获取学生信息
  				$(".tr1").remove();//在每次获取学生信息之前移除所有展示学生信息的行，防止重复展示
  				$.each(data,function(index,item){//遍历获取到的学生信息List
  					$("#t1").append("<tr class='tr1'><td><input class='cs' name='cs' type='checkbox'><input type='hidden' value='"+item.s_id+"'></td>"+
  					"<td>"+item.s_name+"</td><td>"+item.s_age+"</td><td>"+item.s_msg+"</td>"+
  					"<td><input type='button' class='delbtn' οnclick='deleteTr("+item.s_id+")' value='删除'></td></tr>");
  				});
  			});
  		});
  		
  		$("#ck1").click(function(){//表格第一行表头的CheckBox实现全选和反全选（表格中所有CheckBox跟表头选中状态一致）
  			if($("#ck1")!=null){
  				//alert(this.checked);
  				$(".cs").attr("checked",this.checked);
  			}
  		});
  		
  		$("#btn2").click(function(){
  			var check=$(".cs:checked");
  			var checkList="";
  			$.each(check,function(){
  				//alert($(this).next("input:hidden").val());
  				checkList+=$(this).next("input:hidden").val()+",";
  			});
  			//alert(checkList);
  			var url="<%=path%>/test/deletePl";
  			var args={"name":"lattice","age":18,"deleteList":checkList};
  			$.post(url,args,function(data){
  				$(".tr1").remove();
  				$.each(data,function(index,item){
  					$("#t1").append("<tr class='tr1'><td><input class='cs' name='cs' type='checkbox'><input type='hidden' value='"+item.s_id+"'></td>"+
  					"<td>"+item.s_name+"</td><td>"+item.s_age+"</td><td>"+item.s_msg+"</td>"+
  					"<td><input type='button' class='delbtn' οnclick='deleteTr("+item.s_id+")' value='删除'></td></tr>");
  				});
  			});
  		});
  	});

	//表格内部删除按钮的处理，因为这些表格内部的删除按钮是动态生成的，无法再文档加载完成时给其绑定点击事件，所以给其指定删除方法，同时拿到操作的学生id
	function deleteTr(id){
		//alert(id);
		//弹出当前删除按钮同级的hidden标签的value
		//alert($(obj).next("input:hidden").val());
		var url="<%=path%>/test/deletePl";
  		var args={"name":"lattice","age":18,"deleteList":id};
  		$.post(url,args,function(data){
  			$(".tr1").remove();
  			$.each(data,function(index,item){
  				$("#t1").append("<tr class='tr1'><td><input class='cs' name='cs' type='checkbox'><input type='hidden' value='"+item.s_id+"'></td>"+
  				"<td>"+item.s_name+"</td><td>"+item.s_age+"</td><td>"+item.s_msg+"</td>"+
  				"<td><input type='button' class='delbtn' οnclick='deleteTr(this)' value='删除'><input type='hidden' value='"+item.s_id+"'></td></tr>");
  			});
  		});
  		
	}
  </script>
  <body>
    This is my lattice page. <br>
    <input type="button" id="btn1" value="获取所有学生信息">
    <br>
    <table id="t1" border="1" style="border:1px solid #00aaff;">
    	<tr>
    		<td><input id="ck1" type="checkbox"></td>
    		<td>姓名</td>
    		<td>年龄</td>
    		<td>信息</td>
    		<td>操作</td>
    	</tr>
    </table>
    <br>
    <input type="button" id="btn2" value="删除选中学生信息">
  </body>
</html>

格乄子

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
一个简单jqueryAjax前端页面展示

<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> lattice
复制链接

扫一扫