jquery 行交换 上移 下移

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格数据上下行互换位置</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//上移
$("input.upbtn").each(function () {
$(this).click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
});
//下移
var trLength = $("input.downbtn").length; 
$("input.downbtn").each(function () {
$(this).click(function () {
var $tr = $(this).parents("tr"); 
if ($tr.index() != trLength - 1) { 
$tr.next().after($tr);
}
});
});
});

</script>
</head>
<body>
<table border="1" cellpadding=0 cellspacing=0>
<tr>
<td>4</td>
<td>xxx44xxxx</td>
<td>2013-5-24</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>5</td>
<td>xxxx55xxx</td>
<td>2013-5-25</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>6</td>
<td>xxxx66xxx</td>
<td>2013-5-26</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>7</td>
<td>xxxx77xxx</td>
<td>2013-5-27</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
<tr>
<td>8</td>
<td>xxx88xxxx</td>
<td>2013-5-28</td>
<td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
</table>
</body>
</html>

 

 

<!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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。