form表单拼接

form表单拼接

一般我们添加信息会在另外一个jsp页面进行，然后想了一下能不能直接在当前页面的表单添加信息而不跳转页面，网上查了一些资料没有太大用处，要么牛头不对马嘴，要么高深莫测无法理解，想来想去最后还是使用append方法进行硬拼。
其中的$符号代表使用了jQuery的语法

 <script>
        $(document).on("click","#addUser",function () {
            var addInfor="<tr class='table table-bordered table-hover'>"+
                    "<td><input type=\"checkbox\" id=\"firstCb\" ></td>"+
                "<td ><input type=\"text\" class=\"form-control\" id=\"id\" name=\"id\" ></td>"+
                "<td><input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\" ></td>"+
                "<td><input type=\"text\" class=\"form-control\" id=\"gender\" name=\"gender\"></td>"+
                "<td><input type=\"text\" class=\"form-control\" id=\"age\" name=\"age\" ></td>"+
                "<td><input type=\"text\" class=\"form-control\" id=\"address\" name=\"address\" ></td>"+
                "<td><input type=\"text\" class=\"form-control\" id=\"qq\" name=\"qq\" ></td>"+
                "<td><input type=\"text\" class=\"form-control\" id=\"email\" name=\"email\" ></td>"+
                    "<td width='242px' height='47px'>" +
                        "<button type='submit'  id='append' style='margin: 5px'>确定</button>" +
                        "<button type='submit'  id='cancel' style='margin: 5px'>取消</button></td>"+
                 "</tr>";
            $("table").append(addInfor);
            document.getElementById("cancel").onclick=function () {
                location.href="${pageContext.request.contextPath}/list.jsp"
            }
            document.getElementById("append").onclick=function (){

                document.getElementById("form").action="${pageContext.request.contextPath}/addServlet";
                document.form.submit();
            }

利用两个按钮的id绑定单击事件“确定”和“取消”，分别给定点击后的访问路径，点击确定后需要通过form表单提交信息。具体执行结果如下图

原本以为前端页面设计简单，只要用些模板和样式就可以解决，看来是我想太多了，作为一个程序初学者，路漫漫其修远兮~
现在使用Spring MVC分层设计，下一步学习springboot框架，又是一个大工程，加油加油加油！
2020.10.10记