JS:
Copy codeThe Code is as follows:
/*
@ Parem object the tbody's object
@ Parem object tr's object (must be null)
@ Parem string the className of onmousedown
@ Parem string the className of onmouseout
*/
Function order (tt, old, classover, classout ){
Var sf = arguments. callee; // get the function self
Var trs = tt. getElementsByTagName ('tr ');
For (var I = 0; I <trs. length; I ++ ){
Trs [I]. onmousedown = function (){
If (this. style. cursor = 'move '){
Return false;
}
Classout = this. className;
This. className = classover;
This. style. cursor = 'move ';
Old = this;
}
Trs [I]. onmouseover = function (){
If (this. style. cursor = 'move '|! Old ){
Return false;
}
Var tmp_old = old. cloneNode (true );
Var tmp_now = this. cloneNode (true );
Var p = this. parentNode;
P. replaceChild (tmp_now, old );
P. replaceChild (tmp_old, this );
Sf (tt, tmp_old, classover, classout );
}
Trs [I]. onmouseout = function (){
// This. className = classout;
}
Trs [I]. onmouseup = function (){
This. className = classout;
This. style. cursor = '';
Old = null;
}
}
}
Example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Script src = "js/ajax. js"> </script>
<Script src = "js/global. js"> </script>
<Style type = "text/css">
. Table {
Background-color: red;
}
. Table td {
Background-color: # eeeeee;
}
. Now td {
Background-color: red;
}
</Style>
<Script type = "text/javascript">
<! --
Window. onload = function (){
Order (document. getElementById ('TT'), null, "now ");
}
/*
@ Parem object the tbody's object
@ Parem object tr's object (must be null)
@ Parem string the className of onmousedown
@ Parem string the className of onmouseout
*/
Function order (tt, old, classover, classout ){
Var sf = arguments. callee; // get the function self
Var trs = tt. getElementsByTagName ('tr ');
For (var I = 0; I <trs. length; I ++ ){
Trs [I]. onmousedown = function (){
If (this. style. cursor = 'move '){
Return false;
}
Classout = this. className;
This. className = classover;
This. style. cursor = 'move ';
Old = this;
}
Trs [I]. onmouseover = function (){
If (this. style. cursor = 'move '|! Old ){
Return false;
}
Var tmp_old = old. cloneNode (true );
Var tmp_now = this. cloneNode (true );
Var p = this. parentNode;
P. replaceChild (tmp_now, old );
P. replaceChild (tmp_old, this );
Sf (tt, tmp_old, classover, classout );
}
Trs [I]. onmouseout = function (){
// This. className = classout;
}
Trs [I]. onmouseup = function (){
This. className = classout;
This. style. cursor = '';
Old = null;
}
}
}
// -->
</Script>
<Body>
<Table border = "0" cellpadding = "0" cellspacing = "1" class = "table">
<Tbody>
<Tr>
<Td> ID </td>
<Td> record </td>
</Tr>
</Tbody>
<Tbody id = "tt">
<Tr>
<Td> 1 </td>
<Td> record </td>
</Tr>
<Tr>
<Td> 2 </td>
<Td> record </td>
</Tr>
<Tr>
<Td> 3 </td>
<Td> record </td>
</Tr>
<Tr>
<Td> 4 </td>
<Td> record </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>