利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除
Posted senn0213
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除相关的知识，希望对你有一定的参考价值。
声明：此为本人原创，只想实现功能，界面样式方面没多考虑，很粗糙能看懂就行……2018-5-14
动态生成table，我利用jsp内嵌java代码从后台获取对象集合，输出的时候有2中方法
1.直接利用java代码for(b1 b:bs)输出
2.利用JSTL标签库的c:foreach输出
不同之处在于，利用c:foreach输出要把获取的对象集合加入到request，然后用${}来读取，而for(b1 b:bs)可以直接输出。
第一种方法--for(b1 b:bs)输出
<table id="table"> <tr> <th>复选框</th> <th>编辑室名</th> <th>操作</th> </tr> <% DbUtil db=new DbUtil(); b1Dao bdao=new b1Dao(); List<b1> bs=bdao.select(db.getCon());%> <% for(b1 b:bs){ %> <tr> <td><%=b.getId()%></td> <td><%= b.getBjsName()%></td> <td><input name="upd" type="button" value="修改" onClick="upd(this)"/></td> <td><input name="del" type="button" value="删除" onClick="del(this)"/></td> </tr> <% } %> </table>
-------------------------------------
第二种方法--c:foreach输出
<table id="table">
<tr>
<th>复选框</th>
<th>编辑室名</th>
<th>操作</th>
</tr>
<%
DbUtil db=new DbUtil();
b1Dao bdao=new b1Dao();
List<b1> bs=bdao.select(db.getCon());
request.setAttribute("bs", bs);
%>
<c:forEach var="b" items="${bs }">
<tr id="+${b.getId()}+">
<td >${b.getId()}</td>
<td>${b.getBjsName()}</td>
<td><input name="upd" type="button" value="修改" onClick="upd(${b.getId()})"/></td>
<td><input name="del" type="button" value="删除" onClick="del(${b.getId()})"/></td>
</tr>
</c:forEach>
</table>
说明：这种方法生成的table支持单行删除和修改，不支持多行删除
多行删除和单行修改
1<table id="table"> 2 <tr> 3 <th>复选框</th> 4 <th>编辑室名</th> 5 <th>操作</th> 6 </tr> 7 <% 8 DbUtil db=new DbUtil(); 9 b1Dao bdao=new b1Dao(); 10 List<b1> bs=bdao.select(db.getCon()); 11 request.setAttribute("bs", bs); 12 13 %> 14 <c:forEach var="b" items="${bs }"> 15 <!--单行删除和修改 --> 16 <%-- <tr id="+${b.getId()}+"> 17 <td >${b.getId()}</td> 18 <td>${b.getBjsName()}</td> 19 <td><input name="upd" type="button" value="修改" onClick="upd(${b.getId()})"/></td> 20 <td><input name="del" type="button" value="删除" onClick="del(${b.getId()})"/></td> 21 </tr> --%> 22 <!-- 单行和多行删除 --> 23 <tr id="+${b.getId()}+"> 24 <td><input type="checkbox" name="test"></td> 25 <td class="idd" >${b.getId()}</td> 26 <td>${b.getBjsName()}</td> 27 <td><input name="upd" type="button" value="修改" onClick="upd(${b.getId()})"/></td> 28 <%-- <td><input name="del" type="button" value="删除" onClick="del(${b.getId()})"/></td> --%> 29 </tr> 30 31 </c:forEach> 32 </table>
生成的jsp如下图所示：这个是支持多行删除的那个，单行删除的就不做演示了
然后就是实现添加删除和修改功能了，我这个数据表非常简单，只有2个数据，一个id（自增），一个编辑室名name
jsp代码，css我就不贴了
1 <button id="btn1" onClick="add2()">添加</button> <button id="btn2" onClick="del2()" >删除</button> 2 <div id="aa"> 3 <div class="a"> 4 <form name="add" > 5 <input type="text" name="name"/> 6 <input type="submit" value="添加" onClick="login(this.form)"> 7 </form> 8 </div> 9 <div class="b">//修改 10 <form name="upda" > 11 <input type="hidden" id="nid" /> 12 <input id="uname" type="text" name="name2"/> 13 <input type="submit" value="修改" onClick="upd2()"> 14 </form> 18 </div>
功能都是用$.ajax实现的，jquery封装了ajax的功能，所以不用原装的ajax，直接使用jquery.ajax就可以了，而且jar包只需要引入jquery包
这个是添加的js代码，$.ajax的都是重点，我使用的是servlet+javabean结构
1 function login(form){ 2 if(form.name.value==""){ 3 alert("请输入编辑室名！"); 4 form.name.focus(); 5 return false; 6 } 8 $.ajax({ 9 url:"/db-5/add?action=add",//注意这个路径是绝对路径，要包括项目名的，我这个项目名叫db-5，add是servlet的名，action就是传到后台的值 10 type:"POST",//这个可以选择get什么的 11 data:"name="+form.name.value, //这个也是要传到后台的值，如果省略了这个data,也可以把它们放在url后面，不过我试了下那样后台好像取不到值 12 dataType:"json",//这个json也是重点，可以多选，什么text的，我也是第一次用，反正用json格式不会出错 13 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止乱码 14 success:function(data){//这个是处理成功返回的数据，data是后台输出的，反正我也不是特别懂 15 if(data == true){ 16 alert("添加成功！");/* window.location.href = "table.jsp"; *///跳转到主页 18 }else{ 19 alert("添加失败！");form.name.focus();return false; 20 } 21 } 22 }); 25 }
这个删除js,包含了单行删除和多行删除的代码
1 function del(d){//只支持单行删除的js 2 $(this).parent().remove(); 3 var id=d; 4 $.ajax({ 5 url:"/db-5/add?action=del", 6 type:"POST", 7 data:"id="+id, 8 dataType:"json", 9 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止乱码 10 success:function(data){ 11 if(data == true){ 12 alert("删除成功！");window.location = "table.jsp"; //跳转到主页 13 14 }else{ 15 alert("删除失败！");return false; 16 } 17 } 18 }); 19 } 20 function del2(){//支持单行和多行删除的js 21 $("input[name=‘test‘]:checked").each(function(){//点击删除按钮触发这个，找到选中的复选框，然后遍历 22 $(this).parents("tr").remove();//把该行从jsp移除，数据表并没有删 23 var id=$(this).parent().siblings("td.idd").text();//获取改行的id，实现数据表该数据的删除 24 //alert(id); 25 $.ajax({//这个和添加类似 26 url:"/db-5/add?action=del",//web.xml和正常那样配置就行了 27 type:"POST", 28 data:"id="+id, 29 dataType:"json", 30 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止乱码 31 success:function(data){ 32 if(data == true){ 33 /* alert("删除成功！");window.location = "table.jsp"; */ //跳转到主页 35 }else{ 36 alert("删除失败！");return false; 37 } 38 } 39 }); 40 }); 41 }
修改js
1 function upd(d){//打开修改窗口 2 //alert("hah"); 3 $(".b").toggle(); 4 $(".a").hide(); 5 var id=d; 6 $("#nid").val(id); 7 //alert(id); 8 } 10 function upd2(){//修改数据 11 //alert("hah"); 12 13 var nid=$("#nid").val(); 14 var name=$("#uname").val(); 15 //alert("name:"+name); 16 $.ajax({ 17 url:"/db-5/add?action=upd", 18 type:"POST", 19 data:"id="+nid+"&name="+name, 20 dataType:"json", 21 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止乱码 22 success:function(data){ 23 if(data == true){ 24 alert("更新成功！"); 25 window.location = "table.jsp"; //跳转到主页 26 $(".b").hide(); 27 }else{ 28 alert("更新失败！");return false; 29 } 30 } 31 }); 32 }
疑问：
整体就这样了，我也是第一次用ajax，虽然基本实现功能了，可我还是不太明白它的处理过程
比如添加一个数据，如果添加成功，弹出成功窗口，table自动刷新，但并没有刷新整个页面，我很奇怪为什么没有刷新整个页面，table表就能自动更新了呢，毕竟table是用java内嵌代码生成的阿，按照代码从上到下执行的原理，java代码之前执行过了，怎么可能还会在执行一次呢，这是疑问1
还有就是每次添加修改或删除成功，有时弹出成功提示窗口（alert("添加成功“)），有时候却不提醒（我设置的是只要成功都会提示的）table也没自动刷新，如果再添加的话它就会提醒而且table也会自动刷新，实际上每次数据都是成功插入的，问题就出现在table自动刷新这块，这又跟疑问1挂钩了，
当然你可以在插入成功，弹出提示，在用 window.location = "table.jsp";刷新整个页面，这样也会有毛病，table有时刷新成功有时候又不能，当然这样做的话，用ajax就有点多余了，
总结：到现在我在迷糊中，毕竟第一次使用ajax，希望有高人看到能解答我的疑问，在此感激不尽。
以上是关于利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除的主要内容，如果未能解决你的问题，请参考以下文章
jQuery ajax 动态append创建表格出现不兼容ie8