javascript - 行のアニメーションと番号付け

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

要件に合わせて更新します。

行番号の修正とFadeInの追加

 $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

コード形式を変更せずに...

1）フェードイン効果の場合..fadeIn（）を使用できます（fadeIn効果は非表示の要素に対してのみ発生するため..最初に非表示にしてからfadeIn..を使用します。

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

2）そして<tr><td>、追加がクリックされるとすぐにsカウントをカウントしているので、カウントはそれ自体です。したがって、テキストを追加するとき、最初は1つのフィールドしかありません...したがって、コードを最後に移動します。行う

これ

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

ここをいじる

Answer 3

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 4

フェードアニメーションはかなり簡単です。テーブルに行を追加する次の行に、次のコードを追加します。

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

1）addTableRow（）関数内に、次のスニペットを配置します。

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

最初ではなく、関数本体の最後に-ここで既存の要素を数えているが、新しい要素はまだ関数の最初に配置されていないため-後で作成されるので、上記は最後に行われます。