移動行上下以HTML表格

Question

可能重複：
Swapping rows in JQuery

如何在一個表中上下移動行上的一些按鈕，點擊？

Answer 1

嘗試使用jQuery。你可以這樣做：

<table id="mytable"> 
    <tr> 
     <td>row 1</td> 
     <td><input type="button" value="move up" class="move up" /></td> 
     <td><input type="button" value="move down" class="move down" /></td> 
    </tr> 
    ... 
</table> 

$('#mytable input.move').click(function() { 
    var row = $(this).closest('tr'); 
    if ($(this).hasClass('up')) 
     row.prev().before(row); 
    else 
     row.next().after(row); 
}); 

看看它的工作here。

你也可以試試jQuery的sortable，它是much easier。

Answer 2

$sel = "SELECT emp_name from emps"; 
$res = mysql_query($sel); 
?> 
<form id="ffff"> 
<table border="1"> 
<?php 
     $c =0; 
     while($row = mysql_fetch_object($res)) { 
     $c++; 
?> 
     <tr> 
      <td><div id="D<?php echo $c; ?>R"><?php echo $row->emp_name; ?></div></td> 
      <td><input type="button" id="D<?php echo $c; ?>" value="Down" class="move down" onClick="MoveDown('D<?php echo $c; ?>','D<?php echo $c+1; ?>');"/></td> 
      <td><input type="button" id="U<?php echo $c; ?>" value="Up" class="move up" onClick="MoveUp('D<?php echo $c; ?>','D<?php echo $c-1; ?>');"/></td> 
     </tr> 
<?php 
     } 
?> 
</table> 
</form> 
<script type="text/javascript"> 
    function MoveDown(roww,rowwN) 
    { 
     divv = document.getElementById(roww+'R').innerHTML; 
     if(roww) 
     { 
     ch = document.getElementById(rowwN+'R').innerHTML; 
     document.getElementById(rowwN+'R').innerHTML = document.getElementById(roww+'R').innerHTML; 
     document.getElementById(roww+'R').innerHTML = ch; 
     } 
    } 
    function MoveUp(roww,rowwN) 
    { 
     divv = document.getElementById(roww+'R').innerHTML; 
     if(roww) 
     { 
     ch = document.getElementById(rowwN+'R').innerHTML; 
     document.getElementById(rowwN+'R').innerHTML = document.getElementById(roww+'R').innerHTML; 
     document.getElementById(roww+'R').innerHTML = ch; 
     } 
    } 
</script> 

Answer 3

<table id="tableID" border="1" width="400"> 
     <tr id="1"> 
       <td>1</td><td>One<input type="button" class="up" value="up"/><input type="button" class="down" value="down"/></td> 
     </tr> 
     <tr id="2"> 
       <td>2</td><td>Two<input type="button" class="up" value="up"/><input type="button" class="down" value="down"/></td> 
     </tr> 
     <tr id="3"> 
       <td>3</td><td>Three<input type="button" class="up" value="up"/><input type="button" class="down" value="down"/></td> 
     </tr> 

</table> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#tableID").delegate('input.up','click', function(e) { 

     var it = $(this).closest('tr'); 
     var prev = $(this).closest('tr').prev('tr'); 

     if(it.attr("id") != $("tr:first").attr("id")){ 
      it.remove(); 
      it.insertBefore(prev); 
     } 
    }); 
    $("#tableID").delegate('input.down','click', function(e) { 

     var it = $(this).closest('tr'); 
     var next = $(this).closest('tr').next('tr'); 

     if(it.attr("id") != $("tr:last").attr("id")){ 
      it.remove(); 
      it.insertAfter(next); 
     }   
    }); 
}); 
</script>