animation ligne et numérotation

Question

quelqu'un peut me aider:

1. Ajouter fondu animation lors de l'ajout et suppression de lignes
2. Pourquoi chiffres devant les lignes ne sont pas affichés correctement lorsque nouvelle ligne ajoutée?

Html:

<table id="table"> 
    <thead> 
    <tr> 
     <th width="8" scope="col">&nbsp;</th> 
     <th width="131" scope="col">Roba/Usluga</th> 
     <th width="144" scope="col">Jmj</th> 
     <th width="144" scope="col">Količina</th> 
     <th width="144" scope="col">Jed. cijena</th> 
     <th width="144" scope="col">Rabat</th> 
     <th width="81" scope="col">&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td></td> 
     <td> 
      <select name="sif_roba1" id="sif_roba1"> 
       <option value="">Please select</option> 
       <option value="1">David Hasselhoff</option> 
       <option value="2">Michael Jackson</option> 
       <option value="3">Tina Turner</option> 
      </select> 
     </td> 
     <td> 
      <select name="idjmj1" id="idjmj1"> 
       <option value="">Please select</option> 
       <option value="1">David Hasselhoff</option> 
       <option value="2">Michael Jackson</option> 
       <option value="3">Tina Turner</option> 
      </select> 
     </td> 
     <td> 
      <input name="cijena1" id="cijena1"> 
     </td> 
     <td> 
      <input name="track1" id="track1"> 
     </td> 
     <td> 
      <input name="rabat1" id="rabat1"> 
     </td> 
     <td> 
      <button class="remove_button">Remove</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<button type="button" class="add" onClick="clickMe();">Add</button> 

Js:

$(document).ready(function ($) { 
     // trigger event when button is clicked 
     $("button.add").click(function() { 
      // add new row to table using addTableRow function 
      addTableRow($("table")); 
      // prevent button redirecting to new page 
      return false; 

     }); 

     // function to add a new row to a table by cloning the last row and 
     // incrementing the name and id values by 1 to make them unique 
     function addTableRow(table) { 

      rowCount = 0; 
      $("#table tr td:first-child").each(function() { 
       rowCount++; 
       $(this).text(rowCount); 
      }); 

      // clone the last row in the table 
      var $tr = $(table).find("tbody tr:last").clone(); 


      // get the name attribute for the input and select fields 
      $tr.find("input,select").attr("name", function() { 
       // break the field name and it's number into two parts 
       var parts = this.id.match(/(\D+)(\d+)$/); 
       // create a unique name for the new field by incrementing 
       // the number for the previous field by 1 
       return parts[1] + ++parts[2]; 

       // repeat for id attributes 
      }).attr("id", function() { 
       var parts = this.id.match(/(\D+)(\d+)$/); 
       return parts[1] + ++parts[2]; 
      }); 
      // append the new row to the table 
      $(table).find("tbody tr:last").after($tr); 


      // remove rows 
      $(".remove_button").live("click", function() { 
       $(this).parents("tr").remove(); 

      }) 

     }; 
    }); 

Fiddle Link

Answer 1

L'animation de fondu est assez facile. Sur la ligne suivante où vous ajoutez la ligne à la table, ajoutez le code suivant:

$tr.hide().fadeIn('slow'); 

Pour le fondu, vous devez supprimer la ligne une seule fois l'animation terminée, donc le mettre dans la fonction animation de rappel:

// remove rows 
$(".remove_button").live("click", function() { 
    $(this).parents("tr").fadeOut('slow', function() { $(this).remove(); }); 
}); 

Enfin, votre compte est incorrect parce que vous ajoutez les chiffres pour les lignes de courant, puis cloner le dernier, de sorte que le dernier numéro sera toujours cloné. Pour résoudre ce problème, tout ce que vous avez à faire est de déplacer votre code pour ajouter le numéro de ligne plus bas, sous le code qui clone et ajoute les lignes. Vous pouvez également ajouter le même code à la fonction de rappel fadeOut afin que les comptes soient réinitialisés après la suppression des lignes.

démonstration de travail: http://jsfiddle.net/VNBzC/6/

Answer 2

solution

à votre deuxième problème

mis à jour js

 $(document).ready(function($) 
    { 
     // trigger event when button is clicked 
     $("button.add").click(function() 
     { 
      // add new row to table using addTableRow function 
      addTableRow($("table")); 
      // prevent button redirecting to new page 
      return false; 

     }); 

     // function to add a new row to a table by cloning the last row and 
     // incrementing the name and id values by 1 to make them unique 
     function addTableRow(table) 
     { 



      // clone the last row in the table 
      var $tr = $(table).find("tbody tr:last").clone(); 


      // get the name attribute for the input and select fields 
      $tr.find("input,select").attr("name", function() 
      { 
       // break the field name and it's number into two parts 
       var parts = this.id.match(/(\D+)(\d+)$/); 
       // create a unique name for the new field by incrementing 
       // the number for the previous field by 1 
       return parts[1] + ++parts[2]; 

      // repeat for id attributes 
      }).attr("id", function(){ 
       var parts = this.id.match(/(\D+)(\d+)$/); 
       return parts[1] + ++parts[2]; 
      }); 
      // append the new row to the table 
      $(table).find("tbody tr:last").after($tr); 


      // remove rows 
      $(".remove_button").live("click", function() { 
      $(this).parents("tr").remove(); 

      }) 
    rowCount = 0; 
    $("#table tr td:first-child").each(function() { 
     rowCount++; 
     $(this).text(rowCount); 
    }); 
     }; 
    }); 

Answer 3

1) A l'intérieur du lieu de fonction addTableRow() cet extrait:

$("#table tr td:first-child").each(function() { 
    rowCount++; 
    $(this).text(rowCount); 
}); 

pas au début mais, à la fin du corps de la fonction - puisque vous comptez les éléments existants ici et que le nouvel élément n'est pas encore en place au début de la fonction - il est créé plus tard, donc ce qui précède doit être fait à la fin.

Answer 4

sans changer le format de votre code ... pour

1) pour fondu en vigueur .. vous pouvez simplement utiliser fadeIn() (depuis effet fadeIn lieu que pour l'élément caché .. cacher d'abord, puis utiliser fadeIn ...

$(table).find("tbody tr:last").after($tr).hide().fadeIn(); 

2) et votre compte est en tant que telle parce que vous comptez les <tr><td> s comptent dès que l'ajout est cliqué .. alors quand le texte annexant il n'y aura qu'un seul champ au premier abord. ..donc déplacer les codes à la fin et qui devrait faire

ce

rowCount = 0; 
$("#table tr td:first-child").each(function() { 
    rowCount++; 
    console.log(rowCount); 
    $(this).text(rowCount); 
}); 

à la fin avant:

$("table").on("click",".remove_button", function() {.... 

Note: live() est dépréciée et enlevé en jquery 1.9 .... donc utiliser on

fiddle here

Answer 5

Mise à jour pour vos besoins:

Row Numéro fixe et Ajouter FadeIn

$tr.hide(); 
$(table).find("tbody tr:last").after($tr); 
$(table).find("tbody tr:last").find('td:first').html(++rowCount).end().fadeIn(500); 

Supprimer FadeOut:

$("table").on("click", ".remove_button", function() { 
    $(this).parents("tr").fadeOut(500, function(){ 
     $(this).remove(); 
}); 

Sample