TR move up & TR move down, trmoveup
Code display ::
<! Doctype html>
<Html>
<Head>
<Link href = "bootstrap.css" rel = "stylesheet">
</Head>
<Body>
<Div class = "table-responsive">
<Table class = "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>
</Html>
The code above shows the effect of moving up and down the table row click event. The table uses the bootstrap style.