Js (jquery)点击新增一行表格

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
        var count = 0;    //递增的开始值
        $(function () {
            var show_count = 20;   //要显示的条数
            $("#btn_addtr").click(function () {
                var length = $("#dynamicTable tbody tr").length;
                if (length < show_count)    //点击时候,如果当前的数字小于递增结束的条件
                {
                    count = count + 1;
                    var tableHtml = "";
                    tableHtml += '<label class="form-inline">'
                        + '<input type="text" name="signal['+count+'].name" class="form-control" placeholder="信号名称">'
                        + '<input type="text" name="signal['+count+'].paraphrase" class="form-control" placeholder="信号释义">'
                        + '</label>';
                    $("#dynamicTable tbody tr").append(tableHtml);   //在表格后面添加一行
                }
            });
        });

    </script>
<table id="dynamicTable">
                    <tbody>
                    <tr>
                        <label class="form-inline">
                            <h6><strong>后台信号</strong></h6>
                            <input type="button" class="button" id="btn_addtr" value="增加行">
                        </label>
                        <label class="form-inline">
                            <input type="text" name="signal[0].name" class="form-control" placeholder="信号名称">
                            <input type="text" name="signal[0].paraphrase" class="form-control" placeholder="信号释义">
                        </label>
                    </tr>
                    </tbody>
                </table>

 


版权声明:本文为qq_36341363原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。