Modifier la valeur d'une zone de texte pour son ordre actuel dans un onglet triable

Question

Modifier: J'ai résolu ce problème par moi-même. Voir my answer below

J'ai mis en place une belle table triable avec jQuery et c'est plutôt sympa. Mais maintenant je veux l'étendre.

Chaque ligne de table a une zone de texte, et je veux que je suis après, chaque fois qu'une ligne est supprimée, les zones de texte se mettent à jour pour refléter l'ordre des zones de texte. E.g. La zone de texte en haut a toujours la valeur '1', la seconde est toujours '2' et ainsi de suite.

J'utilise jQuery et le Table Drag and Drop JQuery plugin

code

Javascript:

<script type="text/javascript"> 
    $(document).ready(function() {   
    $("#table-2").tableDnD({ 
     onDrop: function(table, row) { 
      var rows = table.tBodies[0].rows; 
      var debugStr = "Order: "; 
      for (var i=0; i<rows.length; i++) { 
       debugStr += rows[i].id+", "; 
      } 
      console.log(debugStr) 
      document.forms['productform'].sort1.value = debugStr; 
      document.forms['productform'].sort2.value = debugStr; 
      document.forms['productform'].sort3.value = debugStr; 
      document.forms['productform'].sort4.value = debugStr; 
     }, 
    }); 
}); 

HTML Tableau:

<form name="productform"> 
     <table cellspacing="0" id="table-2" name="productform"> 
      <thead> 
       <tr><td>Product</td> <td>Order</td></tr> 
      </thead> 

      <tbody> 
       <tr class="row1" id="Pol"> <td><a href="1/">Pol</a></td> <td><input type="textbox" name="sort1"/></td> </tr> 
       <tr class="row2" id="Evo"> <td><a href="2/">Evo</a></td> <td><input type="textbox" name="sort2"/></td> </tr> 
       <tr class="row3" id="Kal"> <td><a href="3/">Kal</a></td> <td><input type="textbox" name="sort3"/></td> </tr> 
       <tr class="row4" id="Lok"> <td><a href="4/">Lok</a></td> <td><input type="textbox" name="sort4"/></td> </tr> 
      </tbody> 
     </table> 
    </form> 

Answer 1

Hardnrg à #jquery fini le résoudre pour moi.

Il s'agissait d'ajouter un id = "" à chaque entrée:

<form name="productform"> 
    <table cellspacing="0" id="table-2" name="productform"> 
     <thead> 
      <tr><td>Product</td> <td>Order</td></tr> 
     </thead> 

     <tbody> 
      <tr class="row1" id="Pol"> <td><a href="1/">Pol</a></td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr> 
      <tr class="row2" id="Evo"> <td><a href="2/">Evo</a></td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr> 
      <tr class="row3" id="Kal"> <td><a href="3/">Kal</a></td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr> 
      <tr class="row4" id="Lok"> <td><a href="4/">Lok</a></td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr> 
     </tbody> 
    </table> 
</form> 

Et ajouter cette js à l'événement OnDrop:

for (var i=0; i < rows.length; i++) { 
    $('#' + rows[i].id + "_field").val(i+1); 
} 

Facile comme bonjour!

Answer 2

Hmmm .. Je pense que vous voulez faire quelque chose comme ceci:.

$("input:text", "#table-2").each(function(i){ this.value=i+1; }); 

Le $() chaque l'information de la fonction() est ici: http://docs.jquery.com/Core/each