W3hobbyist

<table border=”1”>
  <tr>
       <td>1. </td>
       <td> Description of item 1 </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
  </tr>
  <tr>
       <td>2. </td>
       <td> Description of item 2 </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
  </tr>
  <tr>
       <td>3. </td>
       <td> Description of item 3 </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
  </tr>
  <tr>
       <td>4. </td>
       <td> Description of item 4 </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
  </tr>
  <tr>
       <td>5. </td>
       <td> Description of item 5 </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
       <td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
  </tr>
</table>

function move(elem,direction)
{
//since we have to deal with two rows: the row that should be moved and the other row which is adjacent to it, we have to first establish references to each of them. We establish these references using the rowIndex property.
 
//lets get the row index on the row that is to be moved(the one on which the user clicked)
//	  a	td		tr  
clickedRowIndex=elem.parentNode.parentNode.rowIndex;
 
//This row could either be the first row or the last row or some inbetween row.
//The first row cannot be moved upwards. So if the user tries to move the first row upwards, we will have to tell him that it can’t be done.
if(clickedRowIndex ==”0” && direction==”up”)
	{
alert(“This is the uppermost row and connot be moved upwards”);
return false;
}
 
//Similarly, if the user wants to move the last row downwards, we again tell him that it isn’t possible
//For this, this we will have to first find how many rows are there in the table, then compare if the rowIndex(rindex) is same as that of last row
maxrindex= (elem.parentNode.parentNode.parentNode.getElementsByTagName(“tr”).length)-1;
if(clickedRowIndex ==maxrindex && direction==”down”)
	{
alert(“This is the bottommost row and cannot be moved downwards.”);
return false;
}
 
//for easy reference to the parent elements, lets setup reference to the parent HTML table.(table tag)
parentTable=elem.parentNode.parentNode.parentNode;
 
//establish reference to the row which is supposed to be moved(the one on which the user clicked)
clickedrow=parentTable.getElementsByTagName(“tr”)[clickedRowIndex];
 
//establish reference to adjacent row.
//If the direction is ‘up’, the adjacent row’s rowIndex will be 1 less that that of ‘clickedrow’
// If the direction is ‘down’, the adjacent row’s rowIndex will be 1 more that that of ‘clickedrow’
 
if(direction==”up”)
{
adjacentRowIndex= clickedRowIndex –1;
}
 
if(direction==”down”)
{
adjacentRowIndex= clickedRowIndex +1;
}
 
adjacentrow= parentTable.getElementsByTagName(“tr”)[adjacentRowIndex];
 
//Once that we have established references to both the rows that should change their position, we should clone each of them
clickedrow_clone=clickedrow.cloneNode(true);
adjacentrow_clone=clickedrow.cloneNode(true);
//both the cloned nodes remain ‘invisible’ to the user.
 
//now replace the nodes. 
 
//The below replaceChild() function will replace the adjacentrow with ‘clone of the clicked row’ and then remove the clone on the clicked row.
adjacentrow=parentTable.replaceChild(clickedrow_cloned,adjacentrow);
 
//similar replacement as above
clickedrow=parentTable.replaceChild(adjacentrow_cloned,clickedrow);
 
// the clones of two rows that we made above were automatically removed by the replaceChild() function.
}