jQuery+Ajax动态添加表格

最近做课设，涉及到前端知识，设计的项目需要用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();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected 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格式获取数据，一定要注意前后端字符串格式是否一致且正确，否则都会报错。

jQuery+Ajax动态添加表格相关推荐

jquery ajax添加ul li,jQuery.ajax动态添加标签无法被获取到
问题:在ajax中获取数据后为页面动态添加标签,点击标签时,无法执行jQuery的onClick方法原因:添加标签的方法在ajax方法内部,而jQuery的onClick方法在ajax方法的外部 ...
php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
2010.02.03——Jquery ajax 动态更新局部刷新
2010.02.03--Jquery ajax 动态更新局部刷新最后的效果如图所示 ,说要达到的目标就是: 当我选着不同的时间,最后一列的时间也跟着变,并且将一系列的参数传到后台,计算出结果,并填 ...
jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...

jQuery+Ajax动态添加表格

jQuery+Ajax动态添加表格相关推荐

最新文章

热门文章