Bootstrap 创建表格通讯录

于 2020-10-18 21:40:15 发布
阅读量463 收藏
点赞数
分类专栏： 前端学习 文章标签： jquery bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46212498/article/details/109150207
版权

偷会懒写篇博文记录一下所学的东西~
先看效果图
在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述项目结构得看一下滴
在这里插入图片描述使用json格式传输数据别忘了导包

直接上代码
联系人列表的固定数据是在登陆成功的时候在Login.java里添加的

Login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进入通讯录</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
 <script src="bootstrap.min.js"></script>
 <script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</head>
<body>
	<form action="Login" method="post">
	    <div class="form-group">
		<p>用户名：<input type="text" class="form-control" placeholder="请输入用户名" id="username" name="username">
		</p></div>
		<div class="form-group">
		<p>密码：<input type="text" class="form-control" id="password" name="password">
		</div>
		<div class="form-group">
		<p><input type="submit" class="btn btn-success" value="进入通讯录">
		<input type="submit" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="点击您所输入的信息将被全部清空"  value="取消">
		</div>
	</form>
</body>
</html>

Tableaddress.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.min.js"></script>
<script src="bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="Add.js"></script>
<title>表格通讯录</title>
</head>
<body>
			<div class="container" style="padding-top: 40px;"><!--整个盒子居中-->
			<table class="table table-bordered text-center">
				<tr >
					<td colspan="4">
						<div class="form-group">
							<div class="row">
								<div class="col-md-8">
									<input  type="text" class="form-control secbox" />
								</div>
								<div class="col-md-3">
									<button class="btn btn-info sec">搜索</button><!--搜索确定-->
									<button class="btn btn btn-success add" data-toggle="modal" data-target="#addModal">增加</button>
									<!--data-toggle data-target 属性插入bootstrap事件自带的模态框事件-->
								</div>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>电话</td>
					<td>操作</td>
				</tr>
			</table>
			<!--修改模态框-->
			<div class="modal fade up" tabindex="-1" role="dialog" id="updateModal">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">修改</h4>
			      </div>
			      <div class="modal-body">
			       	<form>
			       		<div class="form-group">
			       			<input type="text" placeholder="名字" id="reusername" class="form-control" />
			       		</div>
			       		<div class="form-group">
			       			<input type="text" placeholder="电话" class="form-control" id="rephone"/>
			       		</div>
			       	</form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			        <button type="button" class="btn btn-primary que_update">保存</button><!--确定修改-->
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div>
		</div>
		<!--增加模态框-->
		<div class="modal fade addmd" tabindex="-1" role="dialog" id="addModal">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">增加</h4>
			      </div>
			      <div class="modal-body">
			       	<form action="Add" method="post">
			       		<div class="form-group">
			       			<input type="text" placeholder="名字" id="addname" name="addname" class="form-control" />
			       		</div>
			       		<div class="form-group">
			       			<input type="text" placeholder="电话" class="form-control" name="addphone" id="addphone"/>
			       		</div>
			       	</form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
			        <button type="button" class="btn btn-primary que_add">添加</button><!--确定添加-->
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div>
	</div>
</body>
</html>

Add.js

$(function(){
	$.ajax({
    				type:"get",
    				//get方法
    				url:"getAllpeople",
					dataType:"text",
    				//json源文件
    				async:true,
    				//异步
    				success:function(data){
						//var res=eval('('+data+')')
						var res=JSON.parse(data);
    					var str=''
    					for (var i=0;i<res.length;i++){
    						str+='<tr><td id="id">'+(i+1)+'</td><td id="name">'+res[i].name+'</td><td id="phone">'+res[i].phone+'</td><td><button class="btn btn btn-warning btn-xs update" data-toggle = "modal" data-target = "#updateModal">修改</button> <button class="btn btn-danger btn-xs del">删除</button></td></tr>'
    					} 
    					//用for循环将json文件里的name和age拼接成字符串
    					$(".table").append(str)
    					//将刚才保存的字符串append（在被选元素的结尾（仍然在内部）插入指定内容）到我们的HTML里面
    				}
    			});
})   
 //增加
	$(document).on('click','.que_add',function(){
				var name=$("#addname").val();
				var phone=$("#addphone").val();
				var num=$(".table tr").length
		$.ajax({
			type:"post",
			url:"Add",
			data:{"addname":name,"addphone":phone},
			dataType:"text",
			success:function(data){
				var json=eval('('+data+')');//或者用var obj=JSON.parse(data);
				//JSON.stringify(data);
				alert(json.name+"保存成功!联系电话为"+json.phone);
			str='<tr><td>'+(num-1)+'</td><td id="name">'+json.name+'</td><td id="phone">'+json.phone+'</td><td><button class="btn btn-warning btn-xs update" data-toggle = "modal" data-target = "#updateModal">修改</button> <button class="btn btn-danger btn-xs del">删除</button></td></tr>'
			$("table").append(str);
			$(".addmd").modal("hide");
			},
			error:function(){
				alert("false");
			}
		})	
			})
//删除
			$(document).on("click",".del",function(){//找到点击的类目为del的按钮实现删除
				//获取当前行某列的信息
				deletename=$(this).parent().parent().find("td:eq(1)").text();
				deletephone=$(this).parent().parent().find("td:eq(2)").text();
				alert(deletename);
				$.ajax({
					type:"post",				
	           	    url: "Delete",
					data:{"deletename":deletename,"deletephone":deletephone},
	            	dataType:"text", 
	            	async:true,//异步刷新
	            	success: function(data){
					//var json=eval('('+data+')');//JSON.parse(data);
					var json=JSON.parse(data);
					$(this).parent().remove();
					alert(json.Name+"删除成功!联系电话为"+json.Phone);
				},
					error: function() {
		          	alert("false!");
	          	  },
				})
			})
			//确定修改
			$(document).on('click','.update',function(){
				  oldname =$(this).parent().parent().find("td:eq(1)").text(); 
				  oldphone =$(this).parent().parent().find("td:eq(2)").text();
				  //alert(name+phone); 
				 $("#reusername").val(oldname);
				 $("#rephone").val(oldphone);
			     
			})
			$(document).on('click','.que_update',function(){
				var newname=$("#reusername").val();
				var newphone=$("#rephone").val();
				$.ajax({
					type:"post",				
	           	    url: "Revise",//发送到后台servlet的地址
					data:{"oldname":oldname,"oldphone":oldphone,"newname":newname,"newphone":newphone},
	            	dataType:"text", 
	            	async:true,//异步刷新
	            success: function(data){
					var json=eval('('+data+')');
					alert(json.Newname+"修改成功!联系电话为"+json.Newphone);
				},
				error: function() {
		          	alert("false!");
	           	},
				})		
				$(".up").modal("hide");
			})
			//搜索
			$(document).on('click','.sec',function(){
				var data=$(".secbox").val();
				if (data==0) {//判断搜索框是否为空，是则弹窗"请输入一点东西"
					alert("请输入一点东西")
				}else{//否则搜索内容为搜索框（.secbox）里的内容（val）的项将他的背景颜色改成淡蓝色
					$(".table tr:not(:first):contains("+data+")").css("background","#D9EDF7")
					$(this).blur(function(){//离开搜索框是变成默认颜色
						$(".secbox").val("")
						$(".table tr").css("background","#fff")
					})
					//alert(data);
				}
			})

踩坑获得的教训:
jQuery给动态生成的元素绑定事件有很多方法，感兴趣的朋友可以去深入了解一下，这里我用了on方法
在这里插入图片描述在这里插入图片描述
Login.java



import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Login
 */
@WebServlet("/Login")
public class Login extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Login() {
        super();
        
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");	
		PeopleDAO PeopleDao = new PeopleDAO();
		People p1=new People();
		People p2=new People();
		People p3=new People();
		p1.setName("唐超");
		p1.setPhone("19145655936");
		p2.setName("任正非");
		p2.setPhone("19898198338");
		p3.setName("邓云");
		p3.setPhone("13750503071");
		PeopleDao.addPeople(p1);
    	PeopleDao.addPeople(p2);
    	PeopleDao.addPeople(p3);
    	String name=request.getParameter("username");
    	String pwd=request.getParameter("password");
    	System.out.println(name+pwd);
    	if(name.equals("meng")&&pwd.equals("123")) {//此处是验证用户名密码,正确则跳转页面
    		response.sendRedirect("Tableaddress.html");
    	}
	}
}

People.java

public class People {
	String name;
	String phone;
	People(){
		this.name=null;
		this.phone=null; }
    public People(String name,String phone) {
    	this.name=name;
    	this.phone=phone;
    }
	public  void setName(String name) {
    	this.name=name;
    }
    public String getName() {
    	return name;
    }
    public void setPhone(String phone) {
    	this.phone=phone;
    }
    public String getPhone() {
    	return phone;
    }
}

PeopleDAO.java


import java.util.ArrayList;
import java.util.List;
public class PeopleDAO{
	static List<People>Peoplelist=new ArrayList<People>();
	//增加联系人
	public void addPeople(People people) {
		Peoplelist.add(people);
	}
	 //查所有的
    public List<People> getAllpeople() {
	       return Peoplelist;

    }

	//查一个(通过name)
	public People getpeopleByname(String name) {   

		People person=new People("NoName","NoPhone");
		//People person=new People("不存在","不存在");
	       for(People p:Peoplelist) {
	    	   if(p.getName().equals(name))
	             person=p;
	}
	return person;
	}
	//查一个(通过phone)
	public People getpeopleByphone(String phone) {   

		People person=new People("NoName","NoPhone");
		//People person=new People("不存在","不存在");
	       for(People p:Peoplelist) {
	    	   if(p.getPhone().equals(phone))
	             person=p;
	}
	return person;
	}
         //删除
   	    public void deletePeopleByName(String name) 
   	    {  	    	//People p=new People(null,null);
   	       for (int i1 = 0,len1 = Peoplelist.size(); i1 < len1; i1++)
   	       {
   	           if(name.equals(Peoplelist.get(i1).getName())){    
   	        	Peoplelist.remove(Peoplelist.get(i1));
   	        	break;
   	            
   	        	//p.setName(Peoplelist.get(i1).name);
   	        	//p.setPhone(Peoplelist.get(i1).phone);
   	          }
   	       }  
   	      // return p;
       }
   	    public People revisePeople(People oldpeople,String name,String phone)
   	    {
   	    	People temp=new People();
   	    	for(People p:Peoplelist)
   	    	{
   	    		if(p.getName().equals(oldpeople.getName()))
   	    		{
   	    			p.setName(name);
   	    			p.setPhone(phone);
   	    			temp=p;
   	    		}
   	    	}
   	    	return temp;
   	    }
   	 public People revisePeopleName(People oldpeople,String Newname)
	    {
	    	People temp=new People();
	    	for(People p:Peoplelist)
	    	{
	    		if(p.getName().equals(oldpeople.getName()))
	    		{
	    			p.setName(Newname);
	    			temp=p;
	    		}
	    	}
	    	return temp;
	    }
   	public People revisePeoplePhone(People oldpeople,String Newphone)
    {
    	People temp=new People();
    	for(People p:Peoplelist)
    	{
    		if(p.getPhone().equals(oldpeople.getPhone()))
    		{
    			p.setPhone(Newphone);
    			temp=p;
    		}
    	}
    	return temp;
    }
}

getAllPeople.java



import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//import com.google.gson.Gson;

/**
 * Servlet implementation class getAllpeople
 */
@WebServlet("/getAllpeople")
public class getAllpeople extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getAllpeople() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("\"application/json\"");
		response.setContentType("application/json;charset=UTF-8");	
		PrintWriter out=response.getWriter();
		PeopleDAO PeopleDao = new PeopleDAO();
		List<People>PeopleList=new ArrayList<People>();
    	PeopleList=PeopleDao.getAllpeople();
    	for(People p:PeopleList)
		{
			System.out.println("所有--用户名："+p.getName()+"联系电话："+p.getPhone());
		}
    	JSONArray jsonArray=JSONArray.fromObject(PeopleList);
    	out.print(jsonArray.toString());
    	System.out.println(jsonArray.toString());
    	System.out.println(jsonArray);
		out.flush();
		out.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

}

Add.java



import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

/**
 * Servlet implementation class Add
 */
@WebServlet("/Add")
public class Add extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Add() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("application/json;charset=UTF-8");
		String name=request.getParameter("addname");
		String phone=request.getParameter("addphone");
		PrintWriter out=response.getWriter();
		PeopleDAO PeopleDao = new PeopleDAO();
		People p=new People(name,phone);
		PeopleDao.addPeople(p);
		JSONObject json=new JSONObject();
		json.put("name",name);
		json.put("phone",phone);
		System.out.println(name+"保存成功!");
		out.print(json.toString());
	}

}

其他如删查改的java代码和Add.java类似,都是获取前端传回来的数据然后调用PeopleDAO类中的相关方法实现增删查改。

@南故笙烟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值