0

有人能帮我吗：

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

            })

        };
    });

小提琴链接

4

5 回答 5

1

更新您的要求：

行号修复并添加淡入

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

样本

于 2013-03-16T15:58:29.857 回答
0

1) 在 addTableRow() 函数中放置以下代码段：

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

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

于 2013-03-16T15:51:13.863 回答
0

解决您的第二个问题

更新的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);   
   });
        };
    });
于 2013-03-16T15:46:48.993 回答
0

淡入淡出动画相当简单。在将行添加到表的下一行，添加以下代码：

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

于 2013-03-16T15:46:57.097 回答
0

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

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

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

在这里摆弄

于 2013-03-16T15:57:06.827 回答