JQuery实现表格行的上移、下移、删除、增加
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="/Test/js/jquery.min.js"></script><script type="text/javascript">//删除function del(t){ $(t).parent().parent().remove();}//上移function up(t){ var i=$(t).parent().parent().index();//当前行的id if(i>1){//不是表头，也不是第一行，则可以上移 var tem0=$(t).parent().parent().html(); var tem1=$(t).parent().parent().prev().html(); $(t).parent().parent().prev().html(tem0); $(t).parent().parent().html(tem1); }}//下移function down(t){ var l=$("#MyTB tr").length;//总行数 var i=$(t).parent().parent().index();//当前行的id if(i<l-1){//不是最后一行，则可以下移 var tem0=$(t).parent().parent().html(); var tem1=$(t).parent().parent().next().html(); $(t).parent().parent().next().html(tem0); $(t).parent().parent().html(tem1); } } function add(t){ var tem0=$(t).parent().parent().html(); $(t).parent().parent().append("<tr>"+tem0+"</tr>"); }</script> </head> <body> <table id="MyTB"> <tr> <td>xxxxxxxx</td> <td>xxxxxxxx</td> <td>xxxxxxxx</td> <td>xxxxxxxx</td> <td> </td> </tr> <tr> <td>11111111</td> <td>11111111</td> <td>11111111</td> <td>11111111</td> <td> <input type="button" value="上" onclick="up(this)" /> <input type="button" value="下" onclick="down(this)" /> <input type="button" value="删" onclick="del(this)" /> <input type="button" value="加" onclick="add(this)" /> </td> </tr> <tr> <td>22222222</td> <td>22222222</td> <td>22222222</td> <td>22222222</td> <td> <input type="button" value="上" onclick="up(this)" /> <input type="button" value="下" onclick="down(this)" /> <input type="button" value="删" onclick="del(this)" /> <input type="button" value="加" onclick="add(this)" /> </td> </tr> <tr> <td>33333333</td> <td>33333333</td> <td>33333333</td> <td>33333333</td> <td> <input type="button" value="上" onclick="up(this)" /> <input type="button" value="下" onclick="down(this)" /> <input type="button" value="删" onclick="del(this)" /> <input type="button" value="加" onclick="add(this)" /> </td> </tr> <tr> <td>44444444</td> <td>44444444</td> <td>44444444</td> <td>44444444</td> <td> <input type="button" value="上" onclick="up(this)" /> <input type="button" value="下" onclick="down(this)" /> <input type="button" value="删" onclick="del(this)" /> <input type="button" value="加" onclick="add(this)" /> </td> </tr> <tr> <td>55555555</td> <td>55555555</td> <td>55555555</td> <td>55555555</td> <td> <input type="button" value="上" onclick="up(this)" /> <input type="button" value="下" onclick="down(this)" /> <input type="button" value="删" onclick="del(this)" /> <input type="button" value="加" onclick="add(this)" /> </td> </tr> </table> </body></html>?