技术阿道
2017-05-25 12:47
采纳率: 22.2%
浏览 4.8k

如何用JQUERY实现左右移动

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 这样?

    
    <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>
    
    点赞 评论
  • 技术阿道 2017-05-25 14:49

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

    点赞 评论
  • wodewojueding 2017-05-27 07:37

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

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

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

    点赞 评论

相关推荐 更多相似问题