Move Rows up and down in html table [duplicate]

This question already has answers here: Closed 10 years ago.

Possible Duplicate:

Swapping rows in JQuery

How to mo开发者_如何学Pythonve rows up and down in a table on some button click?

---

Try using jQuery. You can do something like:

<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);
});

Look at it working here.

You can also try jQuery's sortable, it is much easier.

---

$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>

---

<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>