I am compiling javascript codes that I may found useful on my future web design. Removing a selected row on a table using Javascript is a good script that I saw on PHPUGPH thread.

Here is the complete script:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<head>
  <title></title>
<script type="text/javascript">
<!--
	function $(obj)
	{
		if(document.getElementById(obj))
	  		return document.getElementById(obj);
		if(document.getElementByName(obj))
			return document.getElementByName(obj);
		alert('unknown object: ' + obj);
		return false;
	}

function setAction(obj,_srctable,_destable)
{
        var srctable = $(_srctable);
        var destable = $(_destable);
    var content;
    var row;
		var index;

    if(_srctable=='destable')
    {
      index = obj.parentNode.rowIndex;
      content=obj.parentNode.rows[obj.rowIndex].cells[0].innerHTML;
      if(content=='')
      {
        index = obj.rowIndex;
        content=obj.rows[obj.rowIndex].cells[0].innerHTML;
//        alert('empty content' + content);

      }
      else
      {
        index = obj.parentNode.rowIndex;
        content=obj.parentNode.rows[obj.rowIndex].cells[0].innerHTML;
        if(content==null)
        {
          index = obj.rowIndex;
          content=obj.rows[obj.rowIndex].cells[0].innerHTML;

        }
//        alert('with content' + content);
      }

   		row = addRow(_destable,index,content);
        row.ondblclick = function()
              {
                setAction(this,'srctable','destable');
                //alert('hello');
              };

   		srctable.deleteRow(obj.rowIndex);

    }
    else
    {

      content = obj.firstChild.nodeValue;
      if(content=='')
      {
        index = obj.rowIndex;
        content = obj.nodeValue;
//        alert('-empty content' + content);
      }
      else
      {
        index = obj.parentNode.rowIndex;
        content = obj.firstChild.nodeValue;
        if(content==null)
        {
          index = obj.rowIndex;
          content = obj.firstChild.firstChild.nodeValue;

        }
//        alert('-with index name' + index);

      }

   		row = addRow(_destable,index,content);
       row.ondblclick = function()
              {
                setAction(this,'destable','srctable');
                //alert('hello');
              };
   		srctable.deleteRow(index);

    }

}

function addRow(id,index,content) {

	var tbody = document.getElementById(id).getElementsByTagName('TBODY')[0];
	var row = document.createElement('TR');
	var td1 = document.createElement('TD');
	td1.appendChild(document.createTextNode(content));

	row.appendChild(td1);

	tbody.appendChild(row);

  return row;
}

// -->
</script>
</head>

<body>
<table id="srctable" border="1">
	<tbody>
		<tr ><td ondblClick="setAction(this,'srctable','destable');">data 1</td></tr>
		<tr ><td ondblClick="setAction(this,'srctable','destable');">data 2</td></tr>
		<tr ><td ondblClick="setAction(this,'srctable','destable');">data 3</td></tr>
		<tr ><td ondblClick="setAction(this,'srctable','destable');">data 4</td></tr>
		<tr ><td ondblClick="setAction(this,'srctable','destable');">data 5</td></tr>
	<tbody>
</table>

<hr />
<table id="destable" border="1">
	<tbody>
	</tbody>
</table>

</body>

</html>