DevKB
Web Development Knowledge Base
HOME | TOP 20 | WRITE AN ARTICLE |
Sections :



RSS RSS Feed

You too, please publish your useful code snippets in any programming language :
write an article !


Valid HTML 4.0 Transitional

Plateforme d'envoi de gros fichiers en ligne
Dépannage site web
Blog infogérance
Hébergement e-mail

Olivier Ligny - - 11/03/2008 - vue 6167 fois

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>


Pierre - - 17/05/2009
Bravo,

C'est exactement ce que je cherchais depuis un bout de temps. Ca marche tres bien.
Cela va permettre a mon utilisateur de classer des documents.
Maintenant je vais essayer de gallerer pour mettre a jour ma base MySql avec Ajax. Si vous avez le bout de code ca serait avec plaisir!
Pierre


Write a comment :
Your name :     E-mail (optional) :

AntiSpam : what animal is visible on this picture ? :

Nos partenaires : iPhone 8 Cases & Protection