表单中手动增加行数,并且使背景的高度随着表单高度的变化而变化

最新推荐文章于 2021-01-04 11:29:56 发布

chunan7838

最新推荐文章于 2021-01-04 11:29:56 发布

阅读量196

点赞数

原文链接：https://my.oschina.net/u/3637273/blog/1501236

版权

<html>
    <span>请输入要增加的行数：<input type="text" name="sum" value="0" id="numLine" class="add-num" 
    onkeypress="keyPress()"/></span>
    <input type="button" value="增加" id="addForm" class="add-btn""/>
    <input type="hidden" id="addnum"/>
</html>

<script>
    $("#addForm").click(function(){
            num=$("#numLine").val();
            var numafter;
            if($("#addnum").val()=="")
            {
                numafter=13;
            }
            else
            {
                numafter=$("#addnum").val();
            }
            var cont;
            for(var bi=0;bi<num;bi++)
            {
                numafter=Number(numafter)+1;
                var line="<tr>" +"<td><input type='text' value="+numafter+"></td>"+
                "<td><input type='text' name='b1'></td>" +
                "<td><input type='text' name='b2'></td>" +
                "<td><input type='text' name='b3'></td>" +
                "<td><input type='text' name='b4'></td>" +
                "<td><input type='text' name='b5'></td>" +
                "<td><input type='text' name='b6'></td>" +
                "<td><input type='text' name='b7'></td>" +
                "<td><input type='text' name='b8'></td>" +
                "<td><input type='text' name='b9'></td>" +
                "</tr>";
                cont = cont +line;
            }
            $("#addnum").val(numafter);
            $("table.gzb tr:last").before(cont);
            reheight();
        });
            function reheight(){
                var oriheight = Number($("#tablegzb").height() + 150);
                $("#img-bg").height(oriheight);
                $("#LayerOut").height(oriheight);
            }
            reheight();
        function keyPress() {
            var keyCode = event.keyCode;
            if ((keyCode >= 48 && keyCode <= 57))
            {
                event.returnValue = true;
            } else {
                event.returnValue = false;
            }
        }
</script>

转载于:https://my.oschina.net/u/3637273/blog/1501236