利用jquery.ajax在jsp页面动态生成table，可以增加修改，并支持一行和多行删除

第一种方法--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代码，css我就不贴了
 1 <button id="btn1" onClick="add2()">添加</button>&nbsp;&nbsp;&nbsp;<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>

 这个是添加的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(){//支持单行和多行删除的js21 ????????$("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 ????}