View Single Post
  #1 (permalink)  
Old June 26th, 2007, 06:41 PM
bucky483 bucky483 is offline
Registered User
 
Join Date: Jun 2007
Location: Little Rock, AR, USA.
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to move rows in a table

Hello,

I'm wanting to be able to move the selected row in a table using an up and down button, but I'm running into problems. Below is a what I have so far. Any advice would be helpful or even another approach of doing this. Also, if I get this working how would you be able to post back the new order using a POST. Maybe hidden fields, but I don't know exactly how.

Thanks,

Matt

Code:
<script language="JavaScript">

    var whichrow = false;
    var TableLocation;        

    function thisrow(x)
    {
        TableLocation = x.sectionRowIndex;

        if(whichrow) 
        {
            whichrow.style.backgroundColor='white';
        }
            whichrow = x;
            whichrow.style.backgroundColor='grey';
        }

    function MoveUp()
    {

        var tablebody = document.getElementById('table1'); 

         rows = document.getElementsByTagName("TR"); 
 
        if((TableLocation > 0) && (TableLocation < tablerows.length)) 
          { 
               rows.insertBefore(rows[TableLocation], rows[TableLocation-1]); 

          } 
    }

    function MoveDown()
    {

        var tablebody = document.getElementById('table1'); 

         rows = document.getElementsByTagName("TR"); 
 
        if((TableLocation > 0) && (TableLocation < tablerows.length)) 
          { 
               rows.insertBefore(rows[TableLocation], rows[TableLocation+1]); 

          } 
    }

</script>

<html>
<body>
<form>
<table id="table1" name="table1" border="3">

   <tr id="tr1" onclick="thisrow(this);">
      <td>A</td>
   </tr>
   <tr id="tr2" onclick="thisrow(this);"> 
       <td>B</td>
   </tr>
   <tr id="tr3" onclick="thisrow(this);"> 
       <td>C</td>
   </tr>
   <tr id="tr4" onclick="thisrow(this);"> 
       <td>D</td>
   </tr>
    <tr id="tr5" onclick="thisrow(this);"> 
       <td>F</td>
    </tr>  
</table>


<input type="button" value="move row up" onClick="MoveUp();"> 
<input type="button" value="move row up" onClick="MoveDown();"> 


</form>    
</body>
</html>
Reply With Quote