Select-Move Rows From HTML Tables Using JavaScript

• Download demo project - 2.0 KB
• Download source files - 2.0 KB

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.