天天看点

jquery动态添加、删除行

1、html的table如下

<table id="skuTable">
                                            <thead>
                                                <tr>
                                                    <th width="65%">  Sku </th>
                                                    <th width="15%">   Quantity </th>
                                                    <th width="20%"> </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="text" class="form-control sku-input" placeholder=" " />
                                                    </td>
                                                    <td>
                                                        <input type="text" style="height:34px; width:50px" class="amount-input" value="1" placeholder=" " />
                                                    </td>
                                                    <td>
                                                        <div class="margin-5">
                                                            <img src="/Content/images/Add.png"  class="ImgAdd" />
                                                            <img class="hidden ImgReduce" src="/Content/images/Reduce.png" />
                                                        </div>
                           
                                                    </td>

                                                </tr>

                                            </tbody>
                                         

                                        </table>
           

2、js的代码如下 

$doc.on('click', '.ImgAdd', function () { 
        console.log("ImgAdd");
        var thisTr = $(this).closest("tr");
        var nextRow = thisTr.clone(true);
        nextRow.show();
        var ImgReduce = $(".ImgReduce", nextRow);
        ImgReduce.removeClass("hidden");
        $("#skuTable").append(nextRow);
        $(this).addClass("hidden");
    });

    $doc.on('click', '.ImgReduce', function () { 
        console.log("ImgAdd");
        var thisTr = $(this).closest("tr");
        var lastTr = thisTr.prev();
        thisTr.remove();

        var tr_count = $("#skuTable").find("tr").length;
        console.log("tr_count=" + tr_count);
        if (tr_count == 2) {
            var ImgAdd = $(".ImgAdd", lastTr);
            ImgAdd.removeClass("hidden");
        }

    });
           

3、效果图如下:

jquery动态添加、删除行