「<-->」ボタンをクリックするとその行が隣のテーブルへ移動します。

a abc
b def
c ghi
d jkl
e mno
f pqr
g stu



<script type="text/javascript">
<!--

function movRow(oj)
{
    if(swt(oj)=='tbl0')
      var targetId = 'tbl1'
    else
      var targetId = 'tbl0'

    //クローン行作成
    var coj = oj.parentNode.parentNode.cloneNode(true)

    //ターゲットテーブルへクローン追加
    var targetTable = document.getElementById(targetId)
        targetTable.firstChild.insertBefore( coj , targetTable.firstChild.firstChild )
    //カレント行削除
    oj.parentNode.parentNode.parentNode.removeChild(oj.parentNode.parentNode)
}

function swt(oj)
{
  return oj.parentNode.parentNode.parentNode.parentNode.getAttribute('id')
}


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

<body bgcolor="#ffffff">

「<-->」ボタンをクリックするとその行が隣のテーブルへ移動します。
<br><br>

<table id="tbl">
  <tr>
   <td bgcolor="#009966" valign="top">

     <!-- 左のテーブル -->
     <table id="tbl0">
       <tr bgcolor="#cccccc">
         <td bgcolor="#ffcc33">a</td>
         <td>abc</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>
       <tr bgcolor="#cccccc">
         <td bgcolor="#ffcc33">b</td>
         <td>def</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>
       <tr bgcolor="#cccccc">
         <td bgcolor="#ffcc33">c</td>
         <td>ghi</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>
       <tr bgcolor="#cccccc">
         <td bgcolor="#ffcc33">d</td>
         <td>jkl</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>
       <tr bgcolor="#cccccc">
         <td bgcolor="#ffcc33">e</td>
         <td>mno</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>

     </table>
     
   </td>
   <td bgcolor="#9966ff" valign="top">


     <!-- 右のテーブル -->
     <table id="tbl1">
       <tr bgcolor="#cccccc">
         <td bgcolor="#ff99ff">f</td>
         <td>pqr</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>
       <tr bgcolor="#cccccc">
         <td bgcolor="#ff99ff">g</td>
         <td>stu</td>
         <td>
           <input type="button" value=" <--> " onclick="movRow(this)">
         </td>
       </tr>
     </table>

    </td>
  </tr>
</table>




「<-->」ボタンをクリックするとその行が隣のテーブルへ移動します。 (*Mac版IEはinputタグ内のtype属性をうまくコピーできませんのでMacの場合はSafariやMozillaなどでご確認ください)