请问jquery中table操作的一个扩展方法

ayun00 2011-06-16 12:37:51

这个方法实现了复制行,怎么扩展一下,实现行删除,上移,下移,交换的功能?



<head runat="server">   

    <script src="jquery.js" type="text/javascript"></script>  

    <title></title>  

    <style type="text/css">

    

    </style>



    <script type="text/javascript">

        $(function(){

            $('#to-clone').clone()

                .find(':text').val('').end()

                .find(':checked').removeAttr('checked').end()

                .appendTo($('#to-append'));

        });

    </script>  

 

</head>

<body>

    <table id="to-append">

        <tr id="to-clone">

            <td>

                <input type="text" value="init" />

                <input type="checkbox" checked="checked" />

                <input type="text" value="init" />

                <input type="checkbox" checked="checked" />

            </td>

        </tr>

    </table>

</body>

...全文

140 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

ayun00 2011-06-16

打赏
举报

我现在写的能不能优化下?



<table>

    <tr>

      <td>1</td>

      <td><input name="hiddenField" type="hidden" id="hiddenField" value="1" />        <input type="button" value="prev" class="prev"/></td>

      <td><input type="button" value="next" class="next"/></td>

    </tr>

    <tr>

      <td>2</td>

      <td><input name="hiddenField" type="hidden" id="hiddenField" value="2" /><input type="button" value="prev" class="prev"/></td>

      <td><input type="button" value="next" class="next"/></td>

    </tr>

    <tr>

      <td>3</td>

      <td><input name="hiddenField" type="hidden" id="hiddenField" value="3" /><input type="button" value="prev" class="prev"/></td>

      <td><input type="button" value="next" class="next"/></td>

    </tr>

    <tr>

      <td>4</td>

      <td><input name="hiddenField" type="hidden" id="hiddenField" value="4" /><input type="button" value="prev" class="prev"/></td>

      <td><input type="button" value="next" class="next"/></td>

    </tr>

    <tr>

      <td>5</td>

      <td><input name="hiddenField" type="hidden" id="hiddenField" value="5" /><input type="button" value="prev" class="prev"/></td>

      <td><input type="button" value="next" class="next"/></td>

    </tr>

    <tr>

      <td>6</td>

      <td><input name="hiddenField" type="hidden" id="hiddenField" value="6" /><input type="button" value="prev" class="prev"/></td>

      <td><input type="button" value="next" class="next"/></td>

    </tr>

  </table>



$(function() {

        // setup ul.tabs to work as tabs for each div directly under div.panes

        $("ul.tabs").tabs("div.panes > div");

		

		

		  $(".next").click(function(){

			

        var curtr = $(this).closest("tr");

		var curid=curtr.find('input:hidden').val();

		

		var nexttr=curtr.next();

		var nextid =nexttr.find('input:hidden').val();

		

		nexttr.find('input:hidden').val(curid);

		curtr.find('input:hidden').val(nextid);

		

        curtr.before(curtr.next());

		alert(curtr.find('input:hidden').val());

    });

    $(".prev").click(function(){

					 

        var tr = $(this).closest("tr");

        tr.after(tr.prev());

    });

zell419 2011-06-16

打赏
举报

按钮,链接用parents("tr") 找到所在的行。
反正是对行的操作是吧。

ayun00 2011-06-16

打赏
举报

有多个操作一般使用按钮或者链接吧
直接绑定到tr 上面无法分辨是向上还是向下啊

zell419 2011-06-16

打赏
举报

[Quote=引用 4 楼 ayun00 的回复:]

引用 3 楼 zell419 的回复:
可以根据 $("table:first tr").index($("#to-clone"))
获得需要操作的行在集合中的位置。
再after() before()执行内部插入~

添加行后 $("#to-clone") 得到的就是一个数组啊
[/Quote]
我只是打个比如了。
如果是tr绑定了事件你就用$(this)啊。

ayun00 2011-06-16

打赏
举报

[Quote=引用 3 楼 zell419 的回复:]
可以根据 $("table:first tr").index($("#to-clone"))
获得需要操作的行在集合中的位置。
再after() before()执行内部插入~
[/Quote]
添加行后 $("#to-clone") 得到的就是一个数组啊

zell419 2011-06-16