html表格动态增加与减少

本文转载自查看原文 2018-07-21 15:50 993 HTML

<html>
<head>
    <title>产品、商品组合</title>
</head>
<body>

<form id="goodsForm">
    <table class="table" border="1">
        <thead>
        <tr>
            <th>检项</th>
            <th>第一节</th>
            <th>第二节</th>
            <th>第三节</th>
        </tr>
        </thead>
        <tbody>
        <tr id="a">

            <td class="td"></td>
            <td><input name="firsts"/></td>
            <td><input name="seconds"/></td>
            <td><input name="thirds"/></td>

        </tr>
        <tr>

            <td class="td"></td>
            <td><input name="firsts"/></td>
            <td><input name="seconds"/></td>
            <td><input name="thirds"/></td>
        </tr>
        </tbody>
    </table>
    <a href="javascript:;" onclick="fun()">增加一行</a>
    <a href="javascript:;" onclick="del()">删除一行</a>
    <a href="javascript:;" id="submit">提交</a>
</form>
</body>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    var i = 1;
    $(".td").each(function(){
        $(this).html(i++);
    })

    function fun(){
        var $td = $("#a").clone();       //增加一行,克隆第一个对象
        $(".table").append($td);
        var i = 1;
        $(".td").each(function(){       //增加一行后重新更新序号1,2,3......
        $(this).html(i++);
        })
        $("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空
    }

    function del(){
        $("table tr:not(:first):not(:first):last").remove();      //移除最后一行,并且保留前两行
    }

    $("#submit").click(function () {
        $.ajax({
            type: "POST",
            url: "combination",
            data: $('#goodsForm').serialize(),
            success: function (data) {
                alert(data)
            },
        });
    });

</script>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 HTML+JS点击增加或减少本文框的数字 angularjs实现动态表格的删除与增加 js方法控制html表格的增加和删除 HTML动态操作表格 pytorch增加和减少维度 js动态增加html页面元素 MUI 里js动态添加数字输入框后，增加、减少按钮无效 vue+elementUI 在表格中动态增加与删除行 Jquery 实现表格动态增加一行，删除一行增加或减少 Numpy 数组维度