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,
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.
> 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.
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.
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
insertBefore() method to move the rows down. The code is commented to help in understanding it.
var RightTable= document.getElementById("tblRight");
CurrentRow = RightTable.rows[i];
PreviousRow = RightTable.rows[i-1];
Yeah, it was fun making that function work for me to achieve just the opposite of what it is actually required to do.