• CSS (6)
  
• Flash & AS (2)
  
• HTML (16)
  
• Java (5)
  
• JavaScript (45)
  
• Perl (0)
  
• PHP (26)
  
• Protocols (1)
  
• Python (0)
  
• Ruby (0)
  
• SQL (3)
  
• Linux (11)
  
• Misc (7)
  

Monter / descendre les lignes d'un tableau en Javascript

Fonction moveup(TR) pour monter la ligne TR, et movedown(TR) pour descendre la ligne TR
Note : le script part du principe que le tableau concerné est le premier de la page, si ce n'est pas le cas alors 2-3 adaptations seront nécessaires pour définir correctement la valeur de la variable tbody.
 

<script type="text/javascript">
function moveup(row){
var i, o;
var tbody=document.getElementsByTagName("tbody")[0], allTRows=tbody.rows;
for(i=1;i<allTRows.length;i++)
    if(allTRows[i]==row){
        o=allTRows[i-1].cloneNode(true);
        tbody.replaceChild(allTRows[i],allTRows[i-1]);
        if(i<allTRows.length)tbody.insertBefore(o,allTRows[i]);
        else tbody.appendChild(o);
        return
    }
}

function movedown(row){
var i, o;
var tbody=document.getElementsByTagName("tbody")[0], allTRows=tbody.rows;
for(i=0;i<allTRows.length-1;i++)
    if(allTRows[i]==row){
        o=allTRows[i+1].cloneNode(true);
        tbody.replaceChild(allTRows[i],allTRows[i+1]);
        if(i<allTRows.length){tbody.insertBefore(o,allTRows[i]);
            tbody.insertBefore(o,allTRows[i])}
        else tbody.appendChild(o);
        return
    }
}
</script>

<TABLE border=1>
 <THEAD>
  <TR>
    <TD>Nom</TD>
    <TD>Monter</TD>
    <TD>Descendre</TD>
  </TR>
 </THEAD>
 <TBODY>
  <TR>
    <TD>Toto</TD>
    <TD onclick="moveup(this.parentNode)">+</TD>
    <TD onclick="movedown(this.parentNode)">-</TD>
  </TR>
  <TR>
    <TD>Titi</TD>
    <TD onclick="moveup(this.parentNode)">+</TD>
    <TD onclick="movedown(this.parentNode)">-</TD>
  </TR>
  <TR>
    <TD>Tutu</TD>
    <TD onclick="moveup(this.parentNode)">+</TD>
    <TD onclick="movedown(this.parentNode)">-</TD>
  </TR>
  <TR>
    <TD>Tonton</TD>
    <TD onclick="moveup(this.parentNode)">+</TD>
    <TD onclick="movedown(this.parentNode)">-</TD>
  </TR>
  <TR>
    <TD>Tata</TD>
    <TD onclick="moveup(this.parentNode)">+</TD>
    <TD onclick="movedown(this.parentNode)">-</TD>
  </TR>
 </TBODY>
<TABLE>