Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old June 26th, 2007, 07: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>
Reply With Quote
  #2 (permalink)  
Old June 26th, 2007, 07: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
Reply With Quote
  #3 (permalink)  
Old June 26th, 2007, 08: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
Reply With Quote
  #4 (permalink)  
Old June 26th, 2007, 09: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
Reply With Quote
  #5 (permalink)  
Old June 26th, 2007, 09: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

Reply With Quote
  #6 (permalink)  
Old June 26th, 2007, 09: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
Reply With Quote
  #7 (permalink)  
Old June 27th, 2007, 01: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
Reply With Quote
  #8 (permalink)  
Old June 27th, 2007, 10: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

Reply With Quote
  #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.
Reply With Quote
  #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
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 11:17 AM
How to move to a certain page in a bound table calgarychinese Classic ASP Databases 5 June 18th, 2007 11:42 AM
Move Datagrid rows michael29 ASP.NET 1.0 and 1.1 Professional 1 April 24th, 2007 06:31 PM
loop value move to table mateenmohd Classic ASP Basics 9 August 21st, 2005 07:12 PM
move rows to top with cells in columnA filled RED alienscript Excel VBA 2 December 2nd, 2003 12:51 PM



All times are GMT -4. The time now is 01:56 AM.


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