分類  >  Web前端 >

JQuery兌現表格行的上移、下移、刪除、增加

tags:    時間:2013-12-10 01:03:59
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>

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網