表单提交

最新推荐文章于 2022-08-13 17:05:45 发布
最新推荐文章于 2022-08-13 17:05:45 发布
阅读量149 收藏
点赞数
分类专栏： java 文章标签： 表单提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40394101/article/details/85271999
版权

我的第一个博客

菜鸟一只，大神勿喷 。。。。

试一下用js写的表单提交
代码效果

<html><head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        input::-webkit-input-placeholder{
            position:relative;

        }
        #text {
            height:10px;
            vertical-align:middle;
            line-height:10px;  /*line-height must be equal to height*/
        }
        table{width: 500px;border: 1px solid;}
        table tr{border: 1px dotted;}
        table tr td{border: 1px dotted;text-align: center;height: 20px;}
        text
    </style>

    <script type="text/javascript">

        var i = 2;

        window.onload = function(){

            var insertBut = document.getElementById("insert");

            var table = document.getElementById("table");

            insertBut.onclick = function(){

                //为表格创建新的行
                var row = table.insertRow();

                //为行创建新的列
                var cell1 = row.insertCell();

                //cell1.innerHTML = i++;
                //将序号插入到列的内部的后面
                var seq = document.createTextNode(i++);

                cell1.appendChild(seq);

                var cell2 = row.insertCell();
                cell2.innerHTML = "<input type='text' size='8'/>"
                var cell3 = row.insertCell();
                cell3.innerHTML = "<input type='text' size='8'/>"
                var cell4 = row.insertCell();
                cell4.innerHTML = "<input type='text' size='8'/>"
                var cell5 = row.insertCell();
                cell5.innerHTML = "<input type='text' size='8'/>"
                var cell6 = row.insertCell();

                /*  var deleteBut = document.createElement("input");

                 deleteBut.setAttribute("type", "button");
                 deleteBut.setAttribute("value", "delete");

                 deleteBut.onclick = function(){
                   //删除此行
                   var td = this.parentNode;

                   var tr = td.parentNode;

                   table.deleteRow(tr.rowIndex);

                   //重排序号
                    restSeq();

                 };  */



                //deleteBut.type = "button";
                //deleteBut.value = "delete";

                // cell6.appendChild(deleteBut);
                cell6.innerHTML = "<input type=\"button\" value=\"delete\" onclick=\"delRow(this);\"/>";


            };

            var deleteLastBut = document.getElementById("deleteLast");

            deleteLastBut.onclick = function(){

                //删除最后一行
                table.deleteRow();
                i--;

            };

        };



        function delRow(but){

            var index = but.parentNode.parentNode.rowIndex;

            var table = document.getElementById("table");

            table.deleteRow(index);

            i--;

            //重排序号
            restSeq();
        }

        /**
         * 将表格的序号重置
         */
        function restSeq(){

            var table = document.getElementById("table");

            //获得表格所有的行
            var rows = table.rows;

            for(var i = 1; i < rows.length; i++){

                var row = rows[i];

                //获得行所有的列
                var cells = row.cells;

                //获取第一列
                var seqCell = cells[0];

                seqCell.innerHTML = row.rowIndex;

            }
        }

    </script>
</head>
<body>
<form action="form_action.jsp" method="get">
    <table id="table">
        <thead>
        <tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>导师</th><th>删除</th></tr>
        <tr><td>1</td>
            <td><input type="text" name="fname" size="8" /></td>

            <td><input type="text" name="fname" size="8" /></td>
            <td><input type="text" name="fname" size="8" /></td>
            <td><input type="text" name="fname" size="8" /></td>
            <td><input type="button" value="delete" onclick="delRow(this);"></td></tr></thead>

        <tbody>
        </tbody>
    </table>

    <table>
        <tbody><tr>
            <td><input id="insert" type="button" value="insert"></td>
            <td><input id="deleteLast" type="button" value="deleteLast"></td>
            <td><input type="submit" value="全部提交" /></td>
        </tr>
        </tbody></table>


</form>
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99"
        src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js"
></script>
</body></html>
小蜗牛666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui表单提交
阅读之后，对你有帮助，那就点个赞再走吧
07-04 6273
layui标准的提交 <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-f...
html中表单提交的实现
09-22
在示例代码中，`<form>`标签的`action`属性指定了表单提交的目标地址，而`method`属性定义了提交数据时使用的方法，如GET或POST。 在表单提交过程中，不同的输入控件有不同的作用和属性。例如，文本框`...
表单提交经验
qq_36294683的博客
02-05 186
<form action="${ctx}/rlglproject/employee-daily.action" id="mainFormMobile" method="post"> submit 可通过按钮type = ‘submit’提交，也可以通过添加onclick事件进行提交表单。 提交表单的时候会把name属性传到后台，也可以通过隐藏的input写 有的字段是通过字
表单提交问题
qq_36632604的博客
07-25 97
表单半天不提交 也不报错 原来是写多了个/
form表单提交方式
weixin_30763455的博客
08-07 831
无刷新页面提交表单 表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称，form提交目标位当前页面iframe则不会刷新页面 <form action="/url.do" method="post" target="targe...
【表单设计】input的size和maxlength属性
记录编程生活
06-16 2700
1、示例代码： p>用户名：input type="text" maxlength="8"placeholder="密码/邮箱">p> p>用户名：input type="text" size="8" placeholder="用户名/邮箱">p> 2、区别： maxlength="8"：input输入框中只能够输入8个字符，输入8个字符后再不能输入，即最大输入字符
JavaScript表单提交
weixin_44540247的博客
04-28 9973
表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽，通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。 数据的信息不同，上传的方式也不同。在JavaScript中有四种种表单提交的方式： 一、 Form表单手动提交（get与post） 在没有任何Js代码的影响下，Form表单本身是自带提交功能的。在form元素标签上有两个...
jQuery表单提交
weixin_72101182的博客
08-13 2713
表单提交
AngularJS模仿Form表单提交的实现代码
10-20
为了克服这些限制，AngularJS提供了一种模拟表单提交的方法，允许开发者更加灵活地处理数据发送和接收。本文将通过一个具体的实例代码来讲解如何在AngularJS中模仿Form表单提交。 在AngularJS中，我们通常使用$http...
表单提交源码
07-20
在IT领域，表单提交是Web开发中的一个关键部分，主要用于收集用户输入的数据并将其发送到服务器进行处理。在这个场景中，"post表单提交"指的是HTTP协议中的POST请求方式，它是向服务器发送数据的一种常见方法，特别...
解决Layui 表单提交数据为空的问题
10-18
Layui的表单模块提供了表单验证和表单提交等功能。然而，在开发过程中，有时会遇到表单提交后数据为空的问题。针对这一问题，本文将详细讲解如何诊断和解决Layui表单提交数据为空的问题。 首先，要解决Layui表单...
详解flask表单提交的两种方式
09-20
在 Web 应用中，表单提交是一个非常常见的操作，Flask 提供了两种主要的表单提交方式，分别是使用 AJAX 和传统的表单提交。下面我们将详细介绍这两种方式的实现方法和各自的优缺点。 ### 通用方式 **前端实现：** ...
毕业设计，基于SpringBoot+Vue+MySQL开发的音乐网站，源码+数据库+论文答辩+毕业论文+视频演示
08-20
毕业设计，基于SpringBoot+Vue+MySQL开发的音乐网站，源码+数据库+论文答辩+毕业论文+视频演示 随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了音乐网站的开发全过程。通过分析音乐网站管理的不足，创建了一个计算机管理音乐网站的方案。文章介绍了音乐网站的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。 本音乐网站管理员功能有个人中心，用户管理，歌曲分类管理，歌曲信息管理，管理员管理，系统管理等。用户可以注册登录，试听歌曲，可以下载歌曲。因而具有一定的实用性。 本站是一个B/S模式系统，采用Spring Boot框架，MySQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得音乐网站管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高音乐网站管理效率。 关键词：音乐网站；Spring Boot框架；MySQL数据库
大学生创业计划书(25)-两份资料.doc
08-20
大学生创业计划书(25)-两份资料.doc
基于YOLO-lite的web实时人脸检测，tfjs人脸检测，目标检测+源代码+文档说明+数据集（高分作品）
08-20
<项目介绍> - 基于YOLO-lite的web实时人脸检测，tfjs人脸检测，目标检测 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
8051Proteus仿真c源码I2C
08-20
8051Proteus仿真c源码I2C提取方式是百度网盘分享地址
092 陶瓷工厂进销存管理系统的设计与实现.zip
最新发布
08-20
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《092 陶瓷工厂进销存管理系统的设计与实现》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
大学生创业计划书(14)-两份资料.doc
08-20
大学生创业计划书(14)-两份资料.doc
hutools 表单提交
06-21
Hutool是一个Java工具包，它提供了一系列方便、高效、易于使用的工具类，包括处理HTTP请求的工具。其中，Hutool Form是Hutool中用于处理表单提交的部分，它简化了表单数据的解析和验证过程。 Hutool Form支持多种表单提交方式，比如GET和POST请求，它可以自动将请求中的表单数据解析为Java Bean对象或Map对象，大大减少了开发者处理HTTP请求时的工作量。使用Hutool Form，你可以快速地进行以下操作： 1. 解析表单数据：无论是POST还是GET请求，Hutool都可以轻松解析请求参数，根据预设的字段名映射到对应的属性。 2. 验证表单数据：Hutool提供了数据验证功能，可以根据自定义规则检查表单输入是否合法，例如校验必填项、格式匹配等。 3. 错误处理：如果表单数据验证失败，Hutool会返回清晰的错误信息，便于前端展示给用户。 4. 自动序列化：对于复杂的对象，Hutool能够将其转换为JSON字符串，方便在网络中传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值