jquery melaraskan baris jadual tr atas dan bawah contoh perintah explanation

jquery melaraskan baris jadual tr atas dan bawah contoh perintah explanation_jquery

WBOY

Lepaskan： 2016-05-16 15:20:48

asal

1522 orang telah melayarinya

Jadual ialah elemen yang biasa digunakan Kadangkala susunan baris dalam jadual ini perlu dilaraskan. Berikut ialah contoh kod untuk memperkenalkan cara menggunakan jquery untuk melaksanakan fungsi ini dan berkongsi dengan anda untuk rujukan anda adalah seperti berikut
Contoh kod adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas mencapai keperluan kami Kod ini agak mudah dan tidak akan diperkenalkan di sini.

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.