当前位置：首页 → 问答吧 → 我想实现 table中 tr的下移.....

我想实现 table中 tr的下移.....

时间：2009-03-29

来源：互联网

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>音乐盒</title>
<script language="javascript" src="../jquery.js"></script>
<script language="javascript">
$(document).ready(function(){

   $(".del").each(function(i){
      $(this).click(function(){
        $(this).parent("td").hide();
        $(this).parent("td").siblings().hide();
      });
    })

    $(".next").each(function(i){
      $(this).click(function(){
        var m = $("tr").eq(i).next();
        $("tr").eq(i).before(m);
      });
    })


  });

</script>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
<?php
for($i=0;$i<5;$i++){
?>
<tr>
<td>歌曲<?php echo $i;?></td>
<td><a href="javascript:void(0)" class="play"><img src="play.gif" border="0" alt="播放" /></a></td>
<td><a href="javascript:void(0)" class="prev"><img src="i_previous.gif" border="0" alt="上移" /></a></td>
<td><a href="javascript:void(0)" class="next"><img src="i_next.gif" border="0" alt="下移" /></a></td>
<td><a href="javascript:void(0)" class="del"><img src="i_delete.gif" border="0" alt="删除" /></a></td>
</tr>
<?php
}
?>
</table>
</body>

新手刚刚接触jquery
上面的代码..... 总是在歌曲0 和歌曲1 这个互换... 不知道为什么..
请高手解答

作者: wang4142 发布时间: 2009-03-29

问题解决  替换 next  瞎试试出来的... 希望高手能概述下为什么.....

    $(".next").each(function(i){
      $(this).click(function(){
        var m = $(this).parent().parent();
        var n = $(this).parent().parent().next();
        m.before(n);

      });
    })

作者: wang4142 发布时间: 2009-03-29

别沉啊.... 高手们快出现....

作者: wang4142 发布时间: 2009-03-30

<table>
        <tr><td>1</td><td><button class="prev">prev</button></td><td><button class="next">next</button></td></tr>
        <tr><td>2</td><td><button class="prev">prev</button></td><td><button class="next">next</button></td></tr>
        <tr><td>3</td><td><button class="prev">prev</button></td><td><button class="next">next</button></td></tr>
        <tr><td>4</td><td><button class="prev">prev</button></td><td><button class="next">next</button></td></tr>
        <tr><td>5</td><td><button class="prev">prev</button></td><td><button class="next">next</button></td></tr>
        <tr><td>6</td><td><button class="prev">prev</button></td><td><button class="next">next</button></td></tr>
    </table>

jQuery(function($){
    $(".next").click(function(){
        var tr = $(this).closest("tr");
        tr.before(tr.next());
    });
    $(".prev").click(function(){
        var tr = $(this).closest("tr");
        tr.after(tr.prev());
    });
});

作者: gordianyuan 发布时间: 2009-03-30