行動畫和編號

Question

有人可以幫助我：

1. 添加動畫漸變添加和刪除行
2. 爲什麼中行的前面數字時加入新行被顯示不正確時？

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

淡入淡出的動畫相當簡單。在下面，你行添加到錶行，添加以下代碼：

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

對於淡出，你需要刪除的行只有一次動畫完成，所以把它放在動畫功能的回調：

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

最後，因爲你加的數字爲當前行，然後克隆最後一個，所以最後的數字會一直被克隆的數量是不正確。爲了解決這個問題，你所要做的就是移動你的代碼，將行號進一步向下，在克隆和添加行的代碼下面。您可能還想將相同的代碼添加到fadeOut回調函數中，以便在移除行之後重置計數。

工作演示：http://jsfiddle.net/VNBzC/6/

Answer 2

解決您的第二個問題

更新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）裏面的addTableRow（）函數的地方這個片段：

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

在開始時沒有，但在函數體結束 - 因爲你在這裏計算現有元素，並且新元素在函數的開頭還沒有到位 - 它是在稍後創建的，所以最後必須完成上述操作。

Answer 4

無需更改代碼格式...爲

1）已生效褪色..你可以只使用淡入（）（自淡入效果只發生了隱藏的元素。首先隱藏，然後使用淡入...

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

2）和你的計數是這樣，因爲你是計數<tr><td> S作爲一旦加被點擊數..所以追加文本時會出現只有一個字段在第一。 ..所以移動代碼到結束，並應在之前做底

這

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

：

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

注：live()已被棄用，在jQuery的1.9移除....所以用on

fiddle here

012爲您的要求

Answer 5

更新：

行號修復和添加淡入

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

刪除淡出：

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

Sample