JavaScript - Shifting table rows up and down

I have a html table, the situation is that i need code to shift the rows in a table up or down. on user click event.

Thanks in Advance

Hi! sujit,

you may call this function for the appropriate click events

//*****************************************************************************
// Function to move row in a table down 
//*****************************************************************************    
function moveup(rowindex)
{
    //alert('rowindex:  '+ rowindex);//+'Table:  ' + table);
    if (rowindex > 1)
    {
        table_activityreport.moveRow(rowindex-1,rowindex+2);
        //table_activityreport.moveRow(rowindex+1,rowindex+3);
    }
}
//*****************************************************************************
// Function to move row in a table down 
//*****************************************************************************
function movedown(rowindex)
{
    //alert('rowindex:  '+ rowindex);//+'Table:  ' + table);
    if (rowindex+1 <= table_activityreport.rows.length)
        table_activityreport.moveRow(rowindex+1,rowindex);
}

use move row for this

Hi! chirag

Also you can do like this;

check this which includes source code too...

http://www.experts-exchange.com/Web_Development/Miscellaneous/Q_21100327.html

Hi,

try this...

var tbl =document.getElementById('tableControl');

tbl.moveRow(fromPosition, toPoistion);

suppose you want to move the row from 4 to 5 then,

tbl.moveRow(4,5);

Note: This will work only in IE....

See the following link ::

http://www.velocityreviews.com/forums/t98967-script-for-moving-rows-up-and-down-and-traverse-thru-rows-of-html-table.html

function moveup(rowindex)

//alert('rowindex: '+ rowindex);//+'Table: ' + table);

if (rowindex-1 >= 1)

   Hi, go through the below code. This provides a basic idea of implementing the same. Hope you can work on it, as required.

Here goes the code for you:

-----------------------------------------------------------------------------------------<html>
<head>
<script language="javascript">
<!--
function swapCells(idA,idB)
{
  var cellA=document.getElementById('color'+idA);
  var cellB=document.getElementById('color'+idB);
  if(cellA&&cellB)
  {
    var temp=cellA.innerHTML;
    cellA.innerHTML=cellB.innerHTML;
    cellB.innerHTML=temp;
  }
}
//-->
</script>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2">
  <tr>
    <td>1</td>
    <td id="color1">blue</td>
    <td> </td>
    <td><input type="button" value="down" onClick="swapCells(1,2);"></td>
  </tr>
  <tr>
    <td>1</td>
    <td id="color2">orange</td>
    <td><input type="button" value="up" onClick="swapCells(2,1);"></td>
    <td><input type="button" value="down" onClick="swapCells(2,3);"></td>
  </tr>
  <tr>
    <td>1</td>
    <td id="color3">green</td>
    <td><input type="button" value="up" onClick="swapCells(3,2);"></td>
    <td><input type="button" value="down" onClick="swapCells(3,4);"></td>
  </tr>
  <tr>
    <td>1</td>
    <td id="color4">violet</td>
    <td><input type="button" value="up" onClick="swapCells(4,3);"></td>
    <td><input type="button" value="down" onClick="swapCells(4,5);"></td>
  </tr>
  <tr>
    <td>1</td>
    <td id="color5">red</td>
    <td><input type="button" value="up" onClick="swapCells(5,4);"></td>
    <td> </td>
  </tr>
</table>
</body>
</html>     

-----------------------------------------------------------------------------------------

   But keep in mind the browser issues. If your code is robust and you have implemented whitespaces, Mozilla treats these whitespace as nodes (text nodes) while IE do not. So the siblings will differ. If so, implement the below code:

-----------------------------------------------------------------------------------------var notWhitespace = /\S/;
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x]
    if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
      node.removeChild(node.childNodes[x])
      x--
    }
    if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
      cleanWhitespace(childNode)
    }
  }
}

//clean whitespace on the whole document onload
//you may also clean on target nodes only, tables in your case
window.onload = function(){
cleanWhitespace(document);
}

----------------------------------------------------------------------------------------- For more info. go through the below link: http://www.velocityreviews.com/forums/t98967-script-for-moving-rows-up-and-down-and-traverse-thru-rows-of-html-table.html

Hope you would get command. All the Best..!!

Rakesh Vikram

function MoveRow(source)
{
    var currentRow = GetCurrentSelectedRow();
    if(currentRow == null)
    {
      alert('Please select row to move.');
      return false;
    }
    if (source.id == 'btnTop')
    {
      if(currentRow.previousSibling != null)
     currentRow.parentNode.insertBefore(currentRow, currentRow.parentNode.firstChild );

    }
    else if (source.id == 'btnBottom')
    {
     if(currentRow.nextSibling != null)
     currentRow.parentNode.insertBefore(currentRow, currentRow.parentNode.lastChild );
     currentRow.parentNode.insertBefore(currentRow.parentNode.lastChild, currentRow);
    }
    else if (source.id == 'btnDown')
    {
      if(currentRow.nextSibling != null)
      currentRow.parentNode.insertBefore(currentRow.nextSibling, currentRow);
    }
    else if (source.id == 'btnUp')
    {
      if(currentRow.previousSibling != null)
      currentRow.parentNode.insertBefore(currentRow, currentRow.previousSibling);
    }
}