Code display::
<! DOCTYPE html>
<link href= "Bootstrap.css" rel= "stylesheet" >
<body>
<div class= "Table-responsive" >
<table class= "Table table-striped" >
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,000</td>
<td>Lorem</td>
<td>ipsum</td>
<TD class= "Shangyi" >dolor</td>
<TD class= "Xiayi" >sit</td>
</tr>
<tr>
<td>1,001</td>
<td>amet</td>
<td>consectetur</td>
<TD class= "Shangyi" >adipiscing</td>
<TD class= "Xiayi" >elit</td>
</tr>
<tr>
<td>1,002</td>
<td>Integer</td>
<td>nec</td>
<TD class= "Shangyi" >odio</td>
<TD class= "Xiayi" >Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<TD class= "Shangyi" >cursus</td>
<TD class= "Xiayi" >ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<TD class= "Shangyi" >Sed</td>
<TD class= "Xiayi" >nisi</td>
</tr>
</tbody>
</table>
</div>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Bootstrap.js" ></script>
<script>
$ (function () {
$ (". Shangyi"). Click (function () {
var $currentTr = $ (this). parent ();
var $prevTr = $currentTr. Prev ();
if ($prevTr) {
$currentTr. InsertBefore ($prevTr);
}
});
$ (". Xiayi"). On (' click ', function () {
var $currentTr = $ (this). parent ();
var $nextTr = $currentTr. Next ();
if ($nextTr) {
$currentTr. InsertAfter ($nextTr);
}
});
});
</script>
</body>
The above code shows the effect of moving up and down the table row click event, and the table uses the bootstrap style.
TR Move up && tr Move Down
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
