Import js on the page
Copy codeThe Code is as follows:
Jquery-1.3.2.min.js
Jquery. tablednd_0_5.js
Note: you must first import the jquery-1.3.2.min.js or else an error occurs.
· Create a table
Copy codeThe Code is as follows:
<Table id = "table-1" cellspacing = "0" cellpadding = "2">
<Tr id = "1"> <td> 1 </td> <td> One </td> <td> some text </td> </tr>
<Tr id = "2"> <td> 2 </td> <td> Two </td> <td> some text </td> </tr>
<Tr id = "3"> <td> 3 </td> <td> Three </td> <td> some text </td> </tr>
<Tr id = "4"> <td> 4 </td> <td> Four </td> <td> some text </td> </tr>
<Tr id = "5"> <td> 5 </td> <td> Five </td> <td> some text </td> </tr>
<Tr id = "6"> <td> 6 </td> <td> Six </td> <td> some text </td> </tr>
</Table>
· Insert js Code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Table-1"). tableDnD ();
});
</Script>
· OK.
· Example
Copy codeThe Code is as follows:
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/";
PageContext. setAttribute ("basePath", basePath );
%>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Script type = "text/javascript"
Src = "$ {basePath} common/js/jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript"
Src = "$ {basePath} common/js/jquery. tablednd_0_5.js"> </script>
<Style type = "text/css">
. Aa {
Background: #00FF99
}
. Bb {
Background: # 0066FF
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
Color ();
$ ("# Table-1"). tableDnD ({
OnDrop: function (table, row ){
Var B = $ (row). children (). eq (0). text ();
Color ();
}
});
});
Function color ()
{
Var tbody = $ ("table [id = 'table-1'] tr ");
Tbody. each (function (index ){
Var cc = index % 2;
If (0 = cc)
{
$ (This). removeClass ();
$ (This). addClass ("aa ");
}
Else
{
$ (This). removeClass ();
$ (This). addClass ("bb ");
}
});
}
</Script>
</Head>
<Body>
<Table id = "table-1" cellspacing = "0" cellpadding = "2">
<Tr id = "1"> <td> 1 </td> <td> One </td> <td> some text </td> </tr>
<Tr id = "2"> <td> 2 </td> <td> Two </td> <td> some text </td> </tr>
<Tr id = "3"> <td> 3 </td> <td> Three </td> <td> some text </td> </tr>
<Tr id = "4"> <td> 4 </td> <td> Four </td> <td> some text </td> </tr>
<Tr id = "5"> <td> 5 </td> <td> Five </td> <td> some text </td> </tr>
<Tr id = "6"> <td> 6 </td> <td> Six </td> <td> some text </td> </tr>
</Table>
</Body>
</Html>