jquery는 테이블 행 tr의 위아래 순서 예를 조정합니다.-JS 튜토리얼-php.cn

jquery는 테이블 행 tr의 위아래 순서 예를 조정합니다.

WBOY

풀어 주다： 2016-05-16 15:20:48

원래의

1563명이 탐색했습니다.

테이블은 일반적으로 사용되는 요소입니다. 테이블의 행 순서를 조정해야 하는 경우가 있습니다. 다음은 jquery를 사용하여 이 기능을 구현하는 방법을 소개하고 참조용으로 공유하는 코드 예제입니다. 다음과 같습니다
코드 예시는 다음과 같습니다.

<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css" >
table 
{
 background:#F90;
 width:400px;
 line-height:20px;
}
td 
{
 border-right:1px solid gray;
 border-bottom:1px solid gray;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript" > 
function up(obj) 
{ 
 var objParentTR=$(obj).parent().parent(); 
 var prevTR=objParentTR.prev(); 
 if(prevTR.length>0) 
 { 
  prevTR.insertAfter(objParentTR); 
 } 
} 
function down(obj) 
{ 
 var objParentTR=$(obj).parent().parent(); 
 var nextTR=objParentTR.next(); 
 if(nextTR.length>0) 
 { 
  nextTR.insertBefore(objParentTR); 
 } 
} 
</script>
</head>
<body>
<table border="0" >
 <tr>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <<td>脚本之家</td>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
 <tr>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td>脚本之家</td>
  <td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>
 </tr>
</table>
</body>
</html>

로그인 후 복사

위의 코드는 우리의 요구 사항을 충족합니다. 코드는 비교적 간단하므로 여기서는 소개하지 않습니다.

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.