p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/)
-   Javascript How-To (http://p2p.wrox.com/javascript-how-87/)
-   -   How to move rows in a table (http://p2p.wrox.com/javascript-how/59477-how-move-rows-table.html)

bucky483 June 26th, 2007 07:41 PM

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>


mat41 June 26th, 2007 07: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 08: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 09: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 09: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 09: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 01: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 10: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])

spiringwriter February 1st, 2016 07:29 AM

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


All times are GMT -4. The time now is 09:27 PM.

Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
2013 John Wiley & Sons, Inc.