jQuery+Ajax动态添加表格

最新推荐文章于 2022-10-11 18:14:17 发布

果酱包

最新推荐文章于 2022-10-11 18:14:17 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_46601680/article/details/122349424

版权

最近做课设，涉及到前端知识，设计的项目需要用jQuery动态添加删除html中table的tr和td，试遍了网上的代码都无济于事，无奈只能自己编写。先展示运行结果：

详细代码如下：

dao层代码：

//查看所有用户
		public List<User> findAllUser() throws Exception {
			Connection conn = DBUtil.getConnection();
			String sql = "select * from user";
			PreparedStatement ps = conn.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			List<User> users = new ArrayList<User>();
			while (rs.next()) {
				User user = new User();
				user.setId(rs.getString("user_id"));
				user.setName(rs.getString("name"));
				user.setPassword(rs.getString("password"));
				user.setStatus(rs.getString("status"));
				users.add(user);
			}
			return users;
		}

service层代码：

//查看所有用户信息
	public List<User> findUserService() {
		List<User>users = null;
		try {
			users = uDao.findAllUser();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return users;
	}

controller层代码：

package com.exam.controller;

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

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

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.exam.entity.User;
import com.exam.service.UserService;
import com.exam.service.impl.UserServiceImpl;

import sun.tools.jar.resources.jar;

public class FindUserContro extends HttpServlet {
	private UserService us = new UserServiceImpl();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setHeader("Content-type", "text/html;charset=utf-8");  
		resp.setCharacterEncoding("utf-8");
		List<User> users = us.findUserService();
        //将结果转换为json字符串，以便前端接收
		String jsonStr = JSON.toJSONString(users);
		resp.getWriter().println(jsonStr);
		
	}
	
}

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生管理界面</title>
		<style type="text/css">
			table{
				border-right: gray 1px solid;
				border-top: gray 1px solid;
				border-left: gray 1px solid;
				width: 100%;
				word-break: break-all;
				border-bottom: gray 1px solid;
				border-collapse: collapse;
				background-color: #f5fafe;
				word-wrap: break-word;
			}
			#selectstu {
				background-color: #97CBFF;
				margin-top: 10px;
				height: 25px;
			}
			p {
				text-align: center;
				font-weight: bold;
			}
			#addstu {
				margin-top: 8px;
				text-align: right;
				padding-right: 50px;
			}
			td{
				cursor: hand;
				height: 22px;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="scripts/jquery.min.js"></script>
		<script type="text/javascript">
		//动态添加行，页面加载时执行
		$(document).ready(function(){
			$.ajax({
				url:"FindUserContro",
				type:"POST",
				dataType:"json",
				success:function(data){
					console.log(data);
				$("#stulist").html(""); //清除之前所生成的tr,不然再次查询会追加到原来的表格中
					for(var i=0; i<data.length; i++){
						$("#stulist").append(
							"<tr id='apptr"+i+"'></tr>"			
						);
						var lists = data[i];
					var str = JSON.stringify(lists);  //将返回的data值[object object]转化
						//alert(str);
						$.each(JSON.parse(str),function(index,domele){
							//alert(index);
							//index为属性名，domele为user的属性值
							$("#apptr"+i).append(
								"<td>"+domele+"</td>"	
							);
						});
						$("#apptr"+i).append(
							"<td><a href='edituser.html'>编辑</a></td>"
						);
					}			  
				},
				error:function(){
					alert("系统错误");
				}
			});
		});
		</script>
	</head>
	<body>
		<div id="selectstu">
			<p>查看学生信息</p>
		</div>
		<div id="addstu">
			<button type="button" style="font-size: 15px;" onclick="window.location.href ='adduser.html'">添加</button>
		</div>
		<table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" style="margin-top: 15px;">
			<tr style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">
				<td width="268.12">学号</td>
				<td width="217.59">姓名</td>
				<td width="181.82">密码</td>
				<td width="188.15">身份</td>
				<td width="107.32">编辑</td>
			</tr>
			<tr>
				<table id="stulist" border="1" cellspacing="0" cellpadding="1" rules="all" bordercolor="gray">
				</table>
			</tr>
		</table>
	</body>
</html>

动态添加表格的方法是循环遍历data中的数据，对应添加到表格中输出。缺点是没法控制每个格的样式，除非所有格用一样的样式。还有一点，网上删除表格的方法到我这里都不适用，所以没有写动态删除的方法。

提示：如果要利用json格式获取数据，一定要注意前后端字符串格式是否一致且正确，否则都会报错。

果酱包

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jQuery+Ajax动态添加表格

最近做课设，涉及到前端知识，设计的项目需要用jQuery动态添加删除html中table的tr和td，试遍了网上的代码都无济于事，无奈只能自己编写。先展示运行结果：详细代码如下：dao层代码：//查看所有用户 public List<User> findAllUser() throws Exception { Connection conn = DBUtil.getConnection(); String sql = "select * from ...
复制链接

扫一扫