Javascript 行动画和编号

有人能帮我吗

添加和删除行时添加淡入淡出动画

为什么在添加新行时，行前面的数字不能正确显示

Html:

---

第二个问题的解决方案

更新的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);   
   });
        };
    });

---

淡入淡出动画相当容易。在向表中添加行的下一行中，添加以下代码：

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

对于淡出，您只需要在动画完成后删除该行，因此将其放入动画函数的回调中：

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

最后，您的计数不正确，因为您将当前行的数字相加，然后克隆最后一行，因此最后一个数字将始终被克隆。要解决这个问题，您所要做的就是将用于添加行号的代码进一步下移到克隆和添加行的代码下面。您可能还希望向淡出回调函数添加相同的代码，以便在删除行后重置计数

工作演示：

1） 在addTableRow（）函数中放置以下代码段：

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

---

不是在函数体的开头，而是在函数体的结尾-因为您在这里计算现有的元素，而新元素在函数的开头还没有就位-它是稍后创建的，所以上面的操作必须在末尾完成。

不更改代码格式。。。为了

1） 对于淡入效果。。您可以只使用fadeIn（）（因为fadeIn效果只对隐藏元素发生。。先隐藏它，然后使用fadeIn

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

2） 而您的计数是这样的，因为您在单击add（添加）后立即计算

s计数。。因此，在追加文本时，首先只有一个字段。。。因此，将代码移到末尾，这样就可以了

这个

在结束之前：

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

注意：

live（）

在jquery 1.9中被弃用并删除。。。。因此，请在上使用

---

根据您的要求更新：

行数修复并添加FadeIn

 $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();
 });

---

谢谢，就这样！还有一件事，当删除一行时，像input name=+1这样的变量保持不变，这是不好的。是否可以更改以使变量与行号相同？例如，如果行号为3，则该行中的所有输入框变量也应为name=item3。此外，由于某些原因，小提琴中的行在每次添加一行时都会变得更亮：）

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

 $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();
 });