jquery动态添加、删除行

最新推荐文章于 2023-08-13 16:42:36 发布

loveheronly

最新推荐文章于 2023-08-13 16:42:36 发布

阅读量530

点赞数

分类专栏： .net 文章标签： js jquery table 动态行

本文链接：https://blog.csdn.net/loveheronly/article/details/116520821

版权

.net 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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、效果图如下：