Click here to Skip to main content
11,493,046 members (58,958 online)
Click here to Skip to main content

Select-Move Rows From HTML Tables Using JavaScript

, 15 Aug 2007 72.3K 2.1K 38
Rate this:
Please Sign up or sign in to vote.
An article on how to select rows from one HTML table and move into another HTML table and then re-order the rows in the second HTML
Screenshot - Select-Move1.gif Sample Image - maximum width is 600 pixels

Introduction

Hi Friends!!

This article is about adding and removing rows from one HTML table to another one and then re-ordering the rows in the second table.

There are two tables, tblLeft and tblRight. The left table contains records of students. The second one is initially blank. We then select the required number of student rows from the left table by clicking on them. Clicking a second time on a selected row deselects that row.

Using the > button we add the selected rows into the right table. Using <, we remove the rows from the right table.

Once there are rows in the right table, we can re-order them one at a time by selecting one row and then clicking the appropriate "Up" or "Down" button.

Background

In one of our projects where we were to develop a web application from a desktop application, there was one form where a multi-column list box was used and similar functionality of the selection and re-ordering was implemented.

The problem now was that there was no multi-column list available in ASP.NET 2.0 and we were required to provide the same interface. So, there was a need to make something on our own. Because we wanted it to be working on the client side, HTML controls and JavaScript were the best options.

Using the Code

It's as simple to use as it can be. Just copy paste the code in any HTML file and view it in the browser. Because there's nothing like insertAfter() method available in JavaScript (or if it is, I am not aware of it), I actually used the insertBefore() method to move the rows down. The code is commented to help in understanding it.

//function to move up the selected row
    function SendUp(CurrentRow,PreviousRow)
    {
        PreviousRow.parentNode.insertBefore(CurrentRow,PreviousRow);
    }

    //function to select a row from Right Table to move down
    function MoveDown()
    {
        var RightTable= document.getElementById("tblRight");
        var i=0;
        var RowToMove=0;
        var PreviousRow;
        var CurrentRow;

        for(i=1; i<righttable.rows.length-1; 
            for(i="RightTable.rows.length-1;" rowtomove="i;" 
            if(righttable.rows[i].style.backgroundcolor="=" />
                RowToMove+1; i--)
                {
                    CurrentRow = RightTable.rows[i];
                    PreviousRow = RightTable.rows[i-1];
                    SendUp(CurrentRow, PreviousRow);
                }
            }
        }

Yeah, it was fun making that function work for me to achieve just the opposite of what it is actually required to do.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

nishant sagar
Software Developer
India India
No Biography provided

Comments and Discussions

 
QuestionCode do not work. Pin
Member 1102629420-Aug-14 21:44
memberMember 1102629420-Aug-14 21:44 
BugBug in function AddRows() Pin
Member 1102142519-Aug-14 0:54
memberMember 1102142519-Aug-14 0:54 
Questionthnx can u guide me? Pin
diyaa_0824-Feb-10 0:42
memberdiyaa_0824-Feb-10 0:42 
GeneralExcellent code. thanks! Pin
Binod Shankar7-Aug-09 6:41
memberBinod Shankar7-Aug-09 6:41 
QuestionHow to use this approach in gridview Pin
selvamglobal16-Jul-09 4:45
memberselvamglobal16-Jul-09 4:45 
Questioncall another jsp Pin
goyals5-Mar-09 3:04
membergoyals5-Mar-09 3:04 
GeneralGood One Pin
Aradhanag28-Oct-08 18:17
memberAradhanag28-Oct-08 18:17 
Generalyou'r code is great Pin
f4rs4nn12-Oct-08 2:15
memberf4rs4nn12-Oct-08 2:15 
GeneralGood work man.... Pin
ShaZZzzzzz18-Jun-08 17:57
memberShaZZzzzzz18-Jun-08 17:57 
GeneralGood work, but it does not work in FF Pin
me8work4-Apr-08 7:21
memberme8work4-Apr-08 7:21 
GeneralRe: Good work, but it does not work in FF Pin
nishantsagar8328-May-08 23:38
membernishantsagar8328-May-08 23:38 
Generaldoesn't work in ff Pin
chanu00719-Mar-08 7:51
memberchanu00719-Mar-08 7:51 
GeneralRe: doesn't work in ff Pin
nishantsagar8328-May-08 23:41
membernishantsagar8328-May-08 23:41 
GeneralNice work Pin
itdenz4-Feb-08 23:17
memberitdenz4-Feb-08 23:17 
GeneralHmmm..... Good Pin
Kamal Singh D. Kharayat17-Aug-07 3:38
memberKamal Singh D. Kharayat17-Aug-07 3:38 
GeneralGreat Job Pin
merlin98116-Aug-07 4:54
membermerlin98116-Aug-07 4:54 
GeneralUse this Code on ASP.NET GridView Pin
barbod_blue15-Aug-07 20:12
memberbarbod_blue15-Aug-07 20:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 15 Aug 2007
Article Copyright 2007 by nishant sagar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid