如何用JQUERY实现左右移动

也就是左右各有一个table,对table内的tr中的td内容(不是select,这个简单)。中间是>>, > ,<<, <,的按钮点击可以对选中的数据进行左右移动,这个要怎么实现,还有就是
双击table中的一条内容也能够移动到另一边。具体代码学习下 谢谢。

这样?


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<style>a{display:block;text-align:center}tr.selected{background:#ccc;}</style>
<table border="1" cellpadding="10">
    <tr>
        <td>
            <table border="1">
                <tr><td>1111</td><td>1111</td></tr>
                <tr><td>2222</td><td>2222</td></tr>
                <tr><td>3333</td><td>3333</td></tr>
            </table>
        </td>
        <td id="tdOp">
            <a href="#">>></a>
            <a href="#">></a>
            <a href="#"><<</a>
            <a href="#"><</a>
        </td>
        <td>
            <table border="1">
            </table>
        </td>
    </tr>
</table>
<script>
    $('#tdOp a').click(function () {
        var toRight = this.innerHTML.charAt(0) == '>', all = this.innerHTML.length > 1;
        var s = tables.eq(toRight ? 0 : 1), t = tables.eq(toRight ? 1 : 0);
        if (!all && s.find('tr.selected').length == 0) { alert('请先选中要移动的数据行!'); return false }
        t.append(s.find('tr' + (all ? '' : '.selected'))).find('tr').removeClass('selected');
        return false;
    });
    var tables = $('td table');
    tables.find('tr').click(function () { $(this).toggleClass('selected'); }).dblclick(function () {
        var t = $(this).closest('table'), r = tables.eq(t[0] == tables[0] ? 1 : 0);
        r.append(this);
    });
</script>

这个看起来,好复杂。试了不能用

就是js对html标签的操作
1、点击table中的行时,为该行增加一个特殊标识,比如:样式变色,或者自定义属性等
2、当点击移动时就将标识的行在原有中删除,在新table中添加;

当双击时,直接为每行添加双击事件,还是对标签的删除和添加操作

主要看下jquery的标签属性查找