Move/Rearrange HTML table rows

A simple javascript solution for moving html table rows up/down on click of an image.

function moveUp(node){

var changeNode;

var parent;

if(node.rowIndex!=0){

changeNode=getNextRow(-1,node.rowIndex);

parent = node.parentNode;

parent.insertBefore(node,changeNode);

}

}

function moveDown(node){

var changeNode;

var parent;

var ln = document.getElementById(“myTable”).rows.length;

if(node.rowIndex!=ln-1){

changeNode=getNextRow(1,node.rowIndex);

parent = node.parentNode;

parent.insertBefore(changeNode,node);

}

}

function getNextRow(diff,selectedRowIndex){

var table = document.getElementById(“myTable”);

var cnt;

for (var i = 0, row; row = table.rows[i]; i ++) {

if(row.rowIndex==selectedRowIndex){

cnt = i+diff;

return table.rows[cnt];

}

}

}



First Row
Second Row
Third Row
Fourth Row

~HTH

Advertisement