如何在表附加时对单个行使用fadeIn()

Question

我的目标是在表的一行被附加到表时调用该表的fadeIn()函数。

我对下面的代码有问题。整张桌子都会褪色。

$.get("/getItems/"+count, function(data){
            tr="<tr> <div>";
            td1="<td>"+data["ID"]+"</td>";
            td2="<td>"+data["UNITID"]+"</td>";
            td3="<td>"+data["INSTNM"]+"</td>";
            td4="<td>"+data["ADDR"]+"</td>";
            td5="<td>"+data["CITY"]+"</td>";
            td6="<td>"+data["STABBR"]+"</td>";
            td7="<td>"+data["ZIP"]+"</td><div></tr>";
            $("#table1").append(tr+td1+td2+td3+td4+td5+td6+td7);


           (tr.find(div)).fadeIn(300);

            var rowCount = $('#table1 tr').length;  
            console.log(rowCount);

            if(rowCount>20)
            {
                removeFirstRowAndAppendNewItem(data)
            }
            function removeFirstRowAndAppendNewItem(data)
            {
              console.log("in callback"); // to confirm we have reached here
              $("table#table1 tr:nth-child(2)").remove();}});

知道为什么整张表要更新而不是一行吗？

Answer 1

以fadeIn表中的第一行

$('table#table1 > tr:first').hide().fadeIn(300);

或

$('table#table1 > tr').first().hide().fadeIn(300);

关于您的代码，您可以这样做

        tr ="<tr> <div>";
        tr +="<td>"+data["ID"]+"</td>";
        tr +="<td>"+data["UNITID"]+"</td>";
        tr +="<td>"+data["INSTNM"]+"</td>";
        tr +="<td>"+data["ADDR"]+"</td>";
        tr +="<td>"+data["CITY"]+"</td>";
        tr +="<td>"+data["STABBR"]+"</td>";
        tr +="<td>"+data["ZIP"]+"</td><div></tr>";
        $("#table1").append(tr);