Http://sunxboy.javaeye.com/blog/191652
Use JavaScript to move up and down rows
Keyword: Row MovementHTML code
- <! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
- <HTML>
- <Head>
- <Title> table test </title>
- <Style type = "text/CSS">
- <! --
- TD {text-align: center; font-size: 12px; padding: 3px ;}
- -->
- </Style>
- </Head>
- <Body>
- <Table id = "Table1" bordercolor = "#000000" width = "200" border = "1">
- <Tbody>
- <Tr>
- <TD width = "25%" type = "codeph" text = "codeph"> 1 </TD type = "codeph" text = "/codeph">
- <TD width = "25%"> 11 </TD>
- <! -- Javascript: void (0) is used to pass this parameter to the Event Handler -->
- <TD width = "25%"> <a href = "javascript: void (0)" onclick = "moveup (this)"> move up </a> </TD>
- <TD width = "25%"> <a href = "javascript: void (0)" onclick = "movedown (this)"> move down </a> </TD>
- </Tr>
- <Tr>
- <TD> 2 </TD>
- <TD> 22 </TD>
- <TD> <a href = "javascript: void (0)" onclick = "moveup (this)"> move up </a> </TD>
- <TD> <a href = "javascript: void (0)" onclick = "movedown (this)"> move down </a> </TD>
- </Tr>
- <Tr>
- <TD> 3 </TD>
- <TD> 33 </TD>
- <TD> <a href = "javascript: void (0)" onclick = "moveup (this)"> move up </a> </TD>
- <TD> <a href = "javascript: void (0)" onclick = "movedown (this)"> move down </a> </TD>
- </Tr>
- <Tr>
- <TD> 4 </TD>
- <TD> 44 </TD>
- <TD> <a href = "javascript: void (0)" onclick = "moveup (this)"> move up </a> </TD>
- <TD> <a href = "javascript: void (0)" onclick = "movedown (this)"> move down </a> </TD>
- </Tr>
- <Tr>
- <TD> 5 </TD>
- <TD> 55 </TD>
- <TD> <a href = "javascript: void (0)" onclick = "moveup (this)"> move up </a> </TD>
- <TD> <a href = "javascript: void (0)" onclick = "movedown (this)"> move down </a> </TD>
- </Tr>
- </Tbody>
- </Table>
- </Body>
- </Html>
- <Script language = "JavaScript" type = "text/JavaScript">
- <! --
- Function cleanwhitespace (element ){
- // Traverse the child nodes of the element
- For (VAR I = 0; I <element. childnodes. length; I ++ ){
- VaR node = element. childnodes [I];
- // Determine whether the node is a blank text node. If yes, delete the node.
- If (node. nodetype = 3 &&! /\ S/. Test (node. nodevalue ))
- Node. parentnode. removechild (node );
- }
- }
- // Obtain the table object
- VaR _ TABLE = Document. getelementbyid ("Table1 ");
- Cleanwhitespace (_ table );
- // Move the table row up. The receiving parameter is a link object.
- Function moveup (_ ){
- // Obtain table row Reference through link object
- VaR _ ROW = _ A. parentnode. parentnode;
- // If it is not the first line, it is exchanged with the previous line.
- If (_ row. previussibling) swapnode (_ row, _ row. previussibling );
- }
- // Move the table row down. The receiving parameter is a link object.
- Function movedown (_ ){
- // Obtain table row Reference through link object
- VaR _ ROW = _ A. parentnode. parentnode;
- // If it is not the last row, it is exchanged with the next row.
- If (_ row. nextsibling) swapnode (_ row, _ row. nextsibling );
- }
- // Define the location of two common function switches
- Function swapnode (node1, node2 ){
- // Obtain the parent node
- VaR _ parent = node1.parentnode;
- // Obtain the relative location of the two nodes
- VaR _ T1 = node1.nextsibling;
- VaR _ t2 = node2.nextsibling;
- // Insert node2 to the original location of node1.
- If (_ T1) _ parent. insertbefore (node2, _ T1 );
- Else _ parent. appendchild (node2 );
- // Insert node1 to the original location of node2.
- If (_ T2) _ parent. insertbefore (node1, _ T2 );
- Else _ parent. appendchild (node1 );
- }
- // -->
- </SCRIPT>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en"> <HTML>
- Description: Row movement, compatible with IE/Firefox
- Size: 2 kb
