删除&添加行列

最新推荐文章于 2024-12-20 23:09:17 发布

原创最新推荐文章于 2024-12-20 23:09:17 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的动态尺寸表格。该表格可以根据用户的操作增加或减少维度和尺码选项。通过简单的按钮交互，可以轻松地为产品页面或其他需要尺寸比较的应用场景创建灵活的表格布局。

效果
这里写图片描述
html

<div class="g-clr">
    <table class="table_dimension">
        <tr>
            <td>尺码</td>
            <td>维度1</td>
            <td>维度2</td>
            <td>维度3</td>
            <td>维度4</td>
            <td>维度5</td>
        </tr>
        <tr>
            <td>S</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>M</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>L</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div class="g-clr icon icon_left">
        <span class="add_btn">+</span>
        <span class="del_btn">-</span>
    </div>
</div>
<div class="g-clr icon icon_bottom">
    <span class="add_btn">+</span>
    <span class="del_btn">-</span>
</div>

var PAGE = (function () {
    var fn = {
            table_left: function () {
                $(".icon_left .add_btn").click(function () {
                    $(".table_dimension tr").append("<td></td>");
                });

                $(".icon_left .del_btn").click(function () {
                    $(".table_dimension tr").each(function () {
                        var obj = $(this).find("td:last");
                        obj.remove()
                    })
                });
            },
            table_bottom: function () {
                $(".icon_bottom .add_btn").click(function () {
                   var obj= $(".table_dimension tr:last").clone().html();
                   $(".table_dimension").append("<tr>"+obj+"</tr>")
                });
                $(".icon_bottom .del_btn").click(function () {
                    var arr_len = $(".table_dimension tr").length;
                    $(".table_dimension tr").eq(arr_len - 1).remove();
                });
            }
        },
        init = function () {
            fn.table_left();
            fn.table_bottom();
        };
    return {
        fn: fn,
        init: init
    }
})();

$(function () {
    PAGE.init();
});