编辑表格输入内容、根据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. C# 简单通信（实现文件传输）

    https://blog.csdn.net/Sayesan/article/details/82185772 之前写过一个简单通信传输,不过只有聊天的功能,现在实现了文件传输的功能,借鉴于网上一篇博客 ...

  2. 行车记录仪 MyCar Recorder （转）

    行车记录仪 MyCar Recorder

  3. Openresty与Tengine

    Tengine官方网站:http://tengine.taobao.org/index_cn.html OpenResty官方网站:http://openresty.org/ Openresty和Te ...

  4. C# 嵌入第三方EXE界面到panel中

    C#可以通过windows API,将第三方程序嵌入到panel中,并且可以隐藏程序边框.问题:焦点在内部程序时,主窗口失去焦点:与内部EXE如何通讯? 代码如下: public partial cl ...

  5. eclipse 中的注释 快捷键 多行注释快捷键 单行注释快捷键

    本文链接:https://blog.csdn.net/a0701302/article/details/76177244 Eclipse 中的两种注释方法: (1)多行注释 (2)单行注释 一. 多行 ...

  6. Linux whereis、find和locate命令区别以及应用场景

    查找某个文件是我们在使用使用linux中非常常用的一个命令. linux中有多个查找文件的指令:whereis.find.locate都有类似查找的功能,下面将讲解这些指令之间的区别. whereis ...

  7. python 科学计算基础库安装

    1.numpyNumPy(Numeric Python)是用Python进行科学计算的基本软件包. NumPy是Python编程语言的扩展,增加了对大型多维数组和矩阵的支持,以及一个大型的高级数学函数 ...

  8. 1-1docker加速器

    配置加速器 #编译配置 sudo vim /etc/docker/daemon.json #加入下面的数据 { "registry-mirrors": ["https:/ ...

  9. java main方法

    1.问题:Java main方法为什么是  public static void main(String[] args)??? 序号 场景 编译 运行 解释 1 public修改为private pr ...

  10. AspNetCore 2.2 新特性---HealthCheck

    网站部署上线后, 总是担心网站是否工作正常, 内存压力是否很大, CPU是否超负荷了?当然, 我们有一大套系统, perfromance counter, 监控软件来监视运维生产系统.但是这些第三方软 ...