Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old June 26th, 2007, 06:41 PM
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>
  #2 (permalink)  
Old June 26th, 2007, 06:51 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

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

Wind is your friend
Matt
  #3 (permalink)  
Old June 26th, 2007, 07:45 PM
Registered User
 
Join Date: Jun 2007
Location: Little Rock, AR, USA.
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

<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
  #4 (permalink)  
Old June 26th, 2007, 08:00 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

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
  #5 (permalink)  
Old June 26th, 2007, 08:04 PM
Registered User
 
Join Date: Jun 2007
Location: Little Rock, AR, USA.
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

  #6 (permalink)  
Old June 26th, 2007, 08:26 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

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
  #7 (permalink)  
Old June 27th, 2007, 12:02 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
  #8 (permalink)  
Old June 27th, 2007, 09:09 AM
Registered User
 
Join Date: Jun 2007
Location: Little Rock, AR, USA.
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

  #9 (permalink)  
Old December 31st, 2015, 12:57 PM
Registered User
Points: 3, Level: 1
Points: 3, Level: 1 Points: 3, Level: 1 Points: 3, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2015
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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])

Last edited by pvhung20; December 31st, 2015 at 01:13 PM..
  #10 (permalink)  
Old February 1st, 2016, 07:29 AM
spiringwriter
Guest
 
Posts: n/a
Default

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




Similar Threads
Thread Thread Starter Forum Replies Last Post
move next rows in DataGrid < > prop. not correct fbailey ASP.NET 1.0 and 1.1 Basics 3 September 5th, 2007 10:17 AM
How to move to a certain page in a bound table calgarychinese Classic ASP Databases 5 June 18th, 2007 10:42 AM
Move Datagrid rows michael29 ASP.NET 1.0 and 1.1 Professional 1 April 24th, 2007 05:31 PM
loop value move to table mateenmohd Classic ASP Basics 9 August 21st, 2005 06:12 PM
move rows to top with cells in columnA filled RED alienscript Excel VBA 2 December 2nd, 2003 12:51 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.