Select-Move Rows From HTML Tables Using JavaScript

<script type="text/javascript">

//Note:   There is no method like insertAfter() available in object methods
//        which can be used to move the rows downwards.
//        So, here we move a row down by first appending it to the end of the
//        table and then moving it up till it reaches to one position less than
//        its original position, i.e. its intended destination.
//
//        We use the 'insertBefore()' method for both moving up and moving down,
//        thus fulfilling our purpose with a single method.


//function to select rows from the Left Table
function SelectRow(tblTable)
{
    var SelectedRow = tblTable.target.parentNode;

    //this condition checks for the header row
    if((SelectedRow.id!="tblLeftTr1"))
    {
        if(SelectedRow.style.fontWeight == "bold")  //is selected ?
        {
            SelectedRow.style.fontWeight = "normal";    //deselect
        }
        else
        {
            SelectedRow.style.fontWeight = "bold";  //select
        }
    }
}

//function to select rows from the Right Table (only one row can be selected here)
function SelectRowRight(tblTable)
{
    var SelectedRow = tblTable.target.parentNode;

    //this condition checks for the header row
    if((SelectedRow.id!="tblRightTr1") )
    {
        if(SelectedRow.style.fontWeight == "bold")  //is selected ?
        {
            SelectedRow.style.fontWeight = "normal";    //deselect
        }
        else
        {
            SelectedRow.style.fontWeight = "bold";  //select
        }
    }

    var i=0;
    var RightTable = document.getElementById("tblRight");

    //this loop prevents from selecting multiple rows
    for(i=1; i<righttable.rows.length; i++)<br="" mode="hold" />        {
        if(RightTable.rows[i].id == SelectedRow.id)
        {
        }
        else
        {
            RightTable.rows[i].style.fontWeight = "normal";
        }
    }
}


//function to add selected rows from Left Table to Right Table
function AddRows()
{
    var LeftTable = document.getElementById("tblLeft");
    var RightTable = document.getElementById("tblRight");
    var i=0;
    var j=0;
    var RowPresent = 0; //this variable checks if a row is already added to the Right Table

    for(i=0; i<lefttable.rows.length; i++)<br="" mode="hold" />        {
        if(LeftTable.rows[i].style.fontWeight == "bold")
        {
            for(j=1; j<righttable.childnodes.length; j++)<br="" mode="hold" />                {
                if(RightTable.childNodes[j].id == ("RightRow"+i))
                {
                    RowPresent=1;
                }
            }

            //this code adds the selected rows to Right Table if not already added
            if(RowPresent==0)
            {
                var cells = new Array();
                cells[0]= LeftTable.rows[i].cells[0].innerHTML;
                cells[1]= LeftTable.rows[i].cells[1].innerHTML;

                InsertRow(RightTable, cells, "RightRow" + i);
            }
        }
    }
}


function InsertRow(oTable, cells, rowID)
{
    if (oTable && document.createElement)
    {
        var oRow = document.createElement('TR');
        oRow.id = rowID;
        for (var i=0; i<cells.length; i++)="">
        {
            var oCell = document.createElement('TD');
            var oTxt = document.createTextNode(cells[i]);

            oCell.appendChild(oTxt);
            oRow.appendChild(oCell);
        }
    }
    oTable.appendChild(oRow);
}
//function to remove selected rows from the Right Table
function RemoveRows()
{
    var RightTable = document.getElementById("tblRight");
    var i=0;

    for(i=1; i<righttable.childnodes.length; i++)<br="" mode="hold" />        {
        if(RightTable.childNodes[i].style.fontWeight == "bold")   //is selected ?
        {
            DeleteRow(RightTable.childNodes[i]);
        }
    }
}

//function to delete a row from Right Table
function DeleteRow(RowToDelete)
{
    RowToDelete.parentNode.removeChild(RowToDelete);
    RemoveRows();
}

//function to select a row from Right Table to move up
function MoveUp()
{
    var RightTable = document.getElementById("tblRight");
    var i=0;

    for(i=2; i<righttable.childnodes.length; i++)<br="" mode="hold" />        {
        if(RightTable.childNodes[i].style.fontWeight == "bold")   //is selected ?
        {
            SendUp(RightTable.childNodes[i],RightTable.childNodes[i-1]);
        }
    }
}

//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.childnodes.length-1; i++)<br="" mode="hold" />        {
        if(RightTable.childNodes[i].style.fontWeight == "bold")
        {
            RightTable.childNodes[i];

            RowToMove = i;

            //appends the selected row to the end of the Right Table
            RightTable.childNodes[i].parentNode.appendChild(RightTable.childNodes[i]);

            //this code moves the appended row up till it reaches
            //to one position less than its original position
            for(i=RightTable.childNodes.length-1; i>RowToMove+1; i--)
            {
                CurrentRow = RightTable.childNodes[i];
                PreviousRow = RightTable.childNodes[i-1];

                SendUp(CurrentRow, PreviousRow);
            }
        }
    }
}

</cells.length;></script>