请教JS控制TABLE内容转移的问题

Question

//只做了双击某行，而点按钮的话，写法类似<div>
        <table id="tblLeft" border="1" style="width: 30%; float: left;">
            <tr ondblclick="dblclick(this)">
                <td>
                    1
                </td>
            </tr>
            <tr ondblclick="dblclick(this)">
                <td>
                    2
                </td>
            </tr>
            <tr ondblclick="dblclick(this)">
                <td>
                    3
                </td>
            </tr>
        </table>
     
        <table id="tblRight" border="1" style="width: 30%; float: left;margin-left:10px;">
            <tr ondblclick="dblclick(this)">
                <td>
                    a
                </td>
            </tr>
            <tr ondblclick="dblclick(this)">
                <td>
                    b
                </td>
            </tr>
            <tr ondblclick="dblclick(this)">
                <td>
                    c
                </td>
            </tr>
        </table>
    </div>
function dblclick(objTr)
{
    var tblL=document.getElementById('tblLeft');
    var tblR=document.getElementById('tblRight');
    if(objTr.parentNode.parentNode.id=='tblLeft')//move to right
    {
        var delTr=tblL.firstChild.removeChild(objTr);
        tblR.firstChild.appendChild(delTr);    }
    else//move to left
    {
        var delTr=tblR.firstChild.removeChild(objTr);
        tblL.firstChild.appendChild(delTr);
    }
}

Answer 1

楼上的基本实现了效果了，但是把表格内容如果全部选到一个表格里，两个表格变成一个表格了，这个BUG很大

Answer 2

没有“两个表格变成一个表格”，而是你把所以行都移到另一边了，只是没显示出来而已，你加些js判断是否是最后一行，再加些css，效果更好