编辑表格输入内容、根据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. com.alibaba.druid.pool.DruidPooledConnection cannot be cast to oracle.jdbc.OracleConnection 异常解决办法

    java.lang.ClassCastException: com.alibaba.druid.pool.DruidPooledConnection cannot be cast to oracle. ...

  2. dubbo源码分析- 集群容错之Cluster（一）

    1.集群容错的配置项 failover - 失败自动切换,当出现失败,重试其他服务器(缺省),通常用于读操作,但重试会带来更长的延时. failfast - 快速失效,只发起一次调用,失败立即报错.通 ...

  3. R3300L运行CoreELEC, EmuELEC和Armbian

    R3300L的参数 CPU: S905LRAM: Samsung K4B4G1646E-BCMA 512MB * 2 = 1GBROM: Samsung KLM8G1WEPD-B031 8GB eMM ...

  4. CentOS7下安装Mariadb 10.3.17

    1. install lsb packagesudo yum install -y redhat-lsb 2.install net-tools packagesudo yum install -y ...

  5. 【GMT43智能液晶模块】例程十七：LAN_UDP实验——以太网数据传输

    源代码下载链接: 链接:https://pan.baidu.com/s/1CXeIohlqs7OjrgC9-QZjzg 提取码:be3d 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43 ...

  6. js session失效退出iframe

    // 代码加入登陆页面中 if( window.top != window.self ){ window.top.location = window.location.href; }

  7. linux默认的2.7升级到3.7版本

    CentOS7中自带的python版本是python-2.7.5,由于新开的虚拟机需要使用python3,于是便升级一下版本. 安装Python3.7.3 官网下载地址:https://www.pyt ...

  8. Node 脚本的调试工具

    2016年,Node 决定将 Chrome 浏览器的"开发者工具"作为官方的调试工具,使得 Node 脚本也可以使用图形界面调试 1.准备 创建目录 D:\nodejs>mk ...

  9. maven 国内镜像

    <mirrors> <!-- mirror | Specifies a repository mirror site to use instead of a given reposi ...

  10. 余胜威《MATLAB数学建模经典案例实战》2015年版

    内容介绍 本书全面.系统地讲解了数学建模的知识.书中结合历年全国大学生数学建模竞赛试题,采用案例与算法程序相结合的方法,循序渐进,逐步引导读者深入挖掘实际问题背后的数学问题及求解方法.在本书案例的分析 ...