Question

Ok just got assigned to a new project and have never dealt with Javascript before. Right now the data is moved up and down the grid with the code below. I need to add to the case statement a “top” and “bottom” that will the user the move the selected row to either the top of the grid or the bottom. I am trying to google search answers but not having much luck. Any advice on where I could continue my search would be helpful.

Ok new issue. I added some code that I created. It is in the case statement under “top” and “bottom” The code I added allows me to select an item and move it to the very top of the list. But moving it to the bottom and IE tells me that the script is taking to long. ANy Advice?

Never mind I got the code working. Below is the working code.

function move(direction) {
try {
    if (CSAdmin.selectedItem.element &&
CSAdmin.selectedItem.ID) {
        var row = CSAdmin.selectedItem.element;
        var node =
    getNode(CSAdmin.selectedItem.type, CSAdmin.selectedItem.ID);
        if (node) {
            var sibling = null;
            var rowSibling = null;
            var parent = node.parentNode;
            var rowParent = row.parentNode;
            switch (direction) {
                case "up":
                    {
                        sibling = node.previousSibling;
                        if (sibling) {
                            parent.removeChild(node);
                            parent.insertBefore(node, sibling);
                        }
                        //Move the table row 
                        rowSibling = row.previousSibling;
                        if (rowSibling) {
                            rowParent.removeChild(row);
                            rowParent.insertBefore(row, rowSibling);
                        }
                        break;
                    }
                case "down":
                    {
                        sibling = node.nextSibling;
                        if (sibling) {
                            parent.removeChild(sibling);
                            parent.insertBefore(sibling, node);
                        }
                        //Move the table row if it isn't the insert row
                        rowSibling = row.nextSibling;
                        if (rowSibling && rowSibling.id.indexOf("new", 0) == -1) {
                            rowParent.removeChild(rowSibling);
                            rowParent.insertBefore(rowSibling, row);
                        }
                        break;
                    }
                    case "top":
                    {
                        sibling = node.previousSibling;
                        while (sibling) {
                            if (sibling) {
                                parent.removeChild(node);
                                parent.insertBefore(node, sibling);
                                sibling = node.previousSibling;
                            }
                        }
                        //Move the table row 
                        rowSibling = row.previousSibling;
                        while (rowSibling) {
                            if (rowSibling) {
                                rowParent.removeChild(row);
                                rowParent.insertBefore(row, rowSibling);
                                rowSibling = row.previousSibling;
                            }
                        }
                        break;
                    }
                case "bottom":
                    {
                        sibling = node.nextSibling;
                        while (sibling) {
                            if (sibling) {
                                parent.removeChild(sibling);
                                parent.insertBefore(sibling, node);
                                sibling = node.nextSibling;
                            }
                        }
                        //Move the table row if it isn't the insert row
                        rowSibling = row.nextSibling;
                        while (rowSibling && rowSibling.id.indexOf("new", 0) == -1) {
                            if (rowSibling && rowSibling.id.indexOf("new", 0) == -1) {
                                rowParent.removeChild(rowSibling);
                                rowParent.insertBefore(rowSibling, row);
                                rowSibling = row.nextSibling;
                            }
                        }
                        break;
                    }
            }
        }
    }
}
catch (err) {
    throw new Error("Error moving row:" + err.description);
}

Answer 1

The variable names in your existing code are kind of confusing (you don’t even tell us what node is), but this is the basic premise for making it work. I used jQuery to shortcut the work in this example, but the logic is sound and is not reliant on jQuery.

http://jsfiddle.net/qukDJ/

//move to top
var currentRow = $(this).closest('tr')[0];     
var firstRow = currentRow.parentNode.childNodes[0];
currentRow.parentNode.insertBefore(currentRow, firstRow);

Moving to the bottom is basically the same thing except you want lastRow and insertAfter.

var lastRow = currentRow.parentNode.childNodes[currentRow.parentNode.childNodes.length - 1];
currentRow.parentNode.insertAfter(currentRow, lastRow);