JQuery实现表格行的上移、下移、删除、增加
浏览数：20 /
时间：2015年06月09日
<%@ 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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
