编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

记录自己学习做的东西，写的小demo，希望对大家也有帮助！

代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <link rel="stylesheet" href="../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

    <script type="text/javascript" src="../../js/jquery-1.12.1.min.js"></script>

    <script type="text/javascript" src="../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        table thead tr th {

            border-bottom: 0 !important;

        }

        .table {

            margin-top: 20px;

            width: 80%;

            margin-left: 20px;

        }

        table tr,

        th,

        td {

            text-align: center;

        }

        .tdpadding {

            padding: 0 !important;

        }

        .table_input {

            width: 100%;

            height: 37px;

            border: none;

        }

    </style>

    <body>

        <p id="demo"></p>

        <label>楼号:</label><input name="" type="text" class="louhao">

        <label>单元数:</label><input type="text" id="myInput" oninput="myFunction()">

        <form id="submitForm">

            <table class="table table-bordered">

                <thead class="aa">

                    <tr>

                        <th>单元</th>

                        <th>开始楼层</th>

                        <th>结束楼层</th>

                        <th>每层次数</th>

                    </tr>

                </thead>

                <tbody class="units">

                </tbody>

            </table>

        </form>

    </body>

    <button class="btn">提交</button>

    <script>

        function myFunction() {

            var x = $("#myInput").val();

            $("#demo").text("你输入的是: " + x);

            $(".units").html("");

            var str = ""

            for(var i = 0; i < x; i++) {

                str += "<tr><td class='tdpadding'><input name='inp0' value='" + (i + 1) + "' type='text' readonly='readonly' class='table_input desa'></td><td class='tdpadding'><input name='inp1' value='' type='text' class='table_input'></td><td class='tdpadding'><input name='inp2' value='' type='text' class='table_input'></td><td class='tdpadding'><input name='inp3' value='' type='text' type='text' class='table_input'></td></tr>"

            }

            $(".units").append(str)

        }

        $(".btn").click(function() {

            var louhao = $(".louhao").val()

            console.log(louhao)

            var msg = $("#submitForm").serialize();

            var json = "[{";

            var msg2 = msg.split("&"); //先以“&”符号进行分割，得到一个key=value形式的数组

            var t = false;

            for(var i = 0; i < msg2.length; i++) {

                var msg3 = msg2[i].split("="); //再以“=”进行分割，得到key，value形式的数组

                for(var j = 0; j < msg3.length; j++) {

                    json += "\"" + msg3[j] + "\"";

                    if(j + 1 != msg3.length) {

                        json += ":";

                    }

                    if(t) {

                        json += "}";

                        if(i + 1 != msg2.length) { //表示是否到了当前行的最后一列

                            json += ",{";

                        }

                        t = false;

                    }

                    if(msg3[j] == "inp3") { //这里的“inp3”是你的表格的最后一列的input标签的name值，表示是否到了当前行的最后一个input

                        t = true;

                    }

                }

                if(!msg2[i].match("inp3")) { //同上

                    json += ";";

                }

            }

            json += "]";

            console.log(json)

            //最终msg的值就被转换为：[{"key":"value"；"key":"value"},{"key":"value"；"key":"value"}]格式的json数据<br>

        })

    </script>

</html>

编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理的更多相关文章

  1. 项目小结：手机邮箱正则，URL各种判断返回页面，input输入框输入符合却获取不到问题

    1.手机邮箱正则 近两年出来很多新号码,听说199什么的都有了- -导致以前的正则不能用了....这就很难过,总是过一段时间出一种新号码.因此,我决定使用返朴归真的手机正则. 手机正则:var reg ...

  2. input输入框输入小写字母自动转换成大写字母

    input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件,即时把字母转换为大写字母: html里input加上 <input type="text&qu ...

  3. input输入框输入大小写字母自动转换

    input输入框输入小写字母自动转换成大写字母有两种方法 1.用js onkeyup事件,即时把字母转换为大写字母: html里input加上 <input type="text&qu ...

  4. Firefox浏览器中，input输入框输入的内容在刷新网页后为何还在？

    转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...

  5. HTML中限制input 输入框输入内容

    限制 input 输入框只能输入纯数字1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就是 ...

  6. Input输入框输入银行卡号自动空格

    input输入框是表格中用都最多的,像输入手机,密码,银行卡号的,很多对于输入银行卡号是没有处理的,比如这样~~ 看起来是不是一团乱麻,, 眼睛瞬间一片漆黑~  如果是这样,会不会好很多呢~~ 其实逻 ...

  7. input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"

    项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop  :rules ref这三个属性 2.利用oninput时间进行校验   ...

  8. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  9. iTextSharp动态生成多页pdf及追加内容等记录

    1.要动态生成pdf,无非是用第三方或直接代码生成. 2.iTextSharp生成pdf问题点记录 dll相关下载 https://files.cnblogs.com/files/xlgwr/iTex ...

随机推荐

  1. 常见 SQL 语句的加锁分析

    参考: https://www.aneasystone.com/archives/2017/12/solving-dead-locks-three.html

  2. centos7.5系统elasticsearch使用滚动和全新安装升级到最新的elasticsearch7.4.2版本

    背景: 生产环境大量使用 elasticsearch 集群,不同的业务使用不同版本的elasticsearch es经常曝出一些大的漏洞,需要进行版本升级,并且使用x-pack的基本验证功能,避免用户 ...

  3. 什么是依赖注入 IoC

    设计原则:依赖注入原则 依赖倒置原则,是一种程序设计模式的原则 高层模块不应该依赖底层模块,二者都应该依赖其抽象. 抽象不应该依赖细节,细节应该依赖抽象.依赖导致原则很好的体现了“面向接口编程”的思想 ...

  4. some try on func swap about & and *

    import "fmt" func swap(x,y *int ) { //x ,y = y,x //fault /* t := *x *x = *y *y = t */ //tr ...

  5. 011-Spring aop 002-核心说明-切点PointCut、通知Advice、切面Advisor

    一.概述 切点Pointcut,切点代表了一个关于目标函数的过滤规则,后续的通知是基于切点来跟目标函数关联起来的. 然后要围绕该切点定义一系列的通知Advice,如@Before.@After.@Af ...

  6. 2019 GDD TensorFlow

    https://www.tensorflow.org/ https://tensorflow.google.cn/     (中文站点) 现场PPT照片:    https://pan.baidu.c ...

  7. JavaScript 反射和属性赋值！

    function Antzone(){ this.webName="蚂蚁部落"; this.age=6; } Antzone.prototype={ address:"青 ...

  8. Hadoop深入学习之HA

    1. 基本原理 2.x版本中,HDFS架构解决了单点故障问题,即引入双NameNode架构,同时借助共享存储系统来进行元数据的同步,共享存储系统类型一般有几类,如:Shared NAS+NFS.Boo ...

  9. VSCode调试data层时自身的一个bug

    使用VSCode在pytorch下进行调试有的时候会遇到下面这个错误: E00037.: Exception escaped from start_client Traceback (most rec ...

  10. 在nginx环境下搭建基于ssl证书的websocket服务转发,wss

    1.证书准备 本地调试,可以安装自签名证书,安装方法参考https本地自签名证书添加到信任证书访问 2.修改配置文件 将上面的配置文件拷贝到conf目录,添加或者修改节点如下 # HTTPS serv ...