「<-->」ボタンをクリックするとその行が隣のテーブルへ移動します。
<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などでご確認ください)