行动画和编号

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

            })

        };
    });

小提琴链接

Answer 1

更新您的要求：

行号修复并添加淡入

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

删除FadeOut：

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

样品

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

淡入淡出动画非常简单。 在将行添加到表的下面的行上，添加以下代码：

$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 4

1）在addTableRow（）函数内部，放置以下代码段：

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

不是在函数主体的开头，而是在函数主体的末尾-因为您要在此处计算现有元素，而新元素尚未在函数的开始处就位-它是在以后创建的，因此上述内容必须是最后完成。

Answer 5

无需更改代码格式...对于

1）进行淡入淡出效果..您可以只使用fadeIn（）（因为fadeIn效果仅发生在隐藏元素上。首先隐藏它，然后使用fadeIn ...

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

2）并且您的计数是这样的，因为单击添加后您就在计数<tr><td>的计数..因此，在追加文本时，最初只会有一个字段...所以移动代码到最后，那应该做

这个

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

在这里摆弄