How to move rows in a table

bucky483 · June 26th, 2007, 06:41 PM

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>

mat41 · June 26th, 2007, 06:51 PM

I have just run your code and have no idea what you are trying to achieve. Can you elaborate?

Wind is your friend
Matt

bucky483 · June 26th, 2007, 07:45 PM

<s>Yes, I know the code doesn't work, but I put it there to give you an idea of what I'm trying to achieve.</s> If you had a table with rows like below:
A
B
C
D
and you selected "B" and hit MoveUp button the table would look like:
B
A
C
D

I hope this helps some, if not please let me know.

Thanks,

Matt

mat41 · June 26th, 2007, 08:00 PM

Where did I say your doce didnt work? You should read and respond with more care if you want peoples time...

Wind is your friend
Matt

bucky483 · June 26th, 2007, 08:04 PM

I just noticed that and I apologize. Sorry for the last comment on the code not working. I was meaning to say that the code is not working, not that you said it wasn't working. But I hope the example I gave gives you an idea of what I'm trying to accomplish.

Thanks,

Matt

mat41 · June 26th, 2007, 08:26 PM

No worrries - Yes I am aware of what you want now. Im an ASP guy. JS is not my strong suit however I learn alot attempting to solve other peoples problems. I will have a go after my meeting which starts shortly...

Wind is your friend
Matt

zaerymoghaddam · June 27th, 2007, 12:02 AM

Hi bucky483

It's very simple. You can use 'moveRow' method of table object. It takes two index in rows collection and replaces corresponding rows in table.

You can change your methods to something like this :

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

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

    function MoveUp()
    {
        var tablebody = document.getElementById('table1');
        if(TableLocation > 0)
        {
            tablebody.moveRow(TableLocation, TableLocation - 1);
            TableLocation = TableLocation - 1;
        }
    }

    function MoveDown()
    {
        var tablebody = document.getElementById('table1');
        if((TableLocation > 0) && (TableLocation < tablebody.rows.length - 1))
        {
            tablebody.moveRow(TableLocation, TableLocation + 1);
            TableLocation = TableLocation + 1;
        }
    }

Ehsan Zaery Moghaddam

bucky483 · June 27th, 2007, 09:09 AM

Ehsan Zaery Moghaddam, thanks for that solution, unfortunately moveRow() doesn't work in Mozilla Firefox (only in IE if I remember correctly), which I need it to be able to work in both IE and Firefox.

If you have another way of getting it to work with Firefox as well please let me know.

Thanks,

Matt

pvhung20 · December 31st, 2015, 12:57 PM

Hi bucky483. Thank you for your good, simple coding.

I've corrected the code and see that it works well.
Here are the corrected items:

1,2: var pare = rows{TableLocation].parentNode;
pare.insertBefore(rows[..],row[..-1]);
3: if((TableLocation>0)&&(TableLocation<= rows.length))
4: if((TableLocation>=0)&&(TableLocation<rows.length) )
5: pare.insertBefore(rows[..],rows[TableLocation+2])

February 1st, 2016, 07:29 AM

Thanks, was looking for something like that. It was necessary on the fly to change the table