编辑表格输入内容、根据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. mybatis自定义插件（拦截器）开发详解

    mybatis插件(准确的说应该是around拦截器,因为接口名是interceptor,而且invocation.proceed要自己调用,配置中叫插件)功能非常强大,可以让我们无侵入式的对SQL的 ...

  2. 用go写一个简单的看门狗程序(WatchDog)

    简述 因为公司的一些小程序只是临时使用一下(不再维护更新),有的有一些bug会导致崩溃,但又不是很严重,崩溃了重新启动一下就好. 所以写了一个看门狗程序来监控程序,挂了(因为我这里并不关心程序的其他状 ...

  3. A Full Hardware Guide to Deep Learning深度学习电脑配置

     https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149( 欢迎关注博 ...

  4. golang程序编译时提示“package runtime: unrecognized import path "runtime" (import path does not begin with hostname)”

    在编译golang的工程时提示错误的, 提示的错误信息如下: package bytes: unrecognized import path "bytes" (import pat ...

  5. zabbix删除dashboard无用的报警信息issue

    zabbix出现性能问题,于是清理了一下数据表,在 zabbix_server 端出现性能问题的时候,有大量的插入数据库操作无法执行,触发了大规模服务器不可达的报警经过搜索发现这些信息是跨表联合查询出 ...

  6. phpstorm2019.1 实现保存（ctrl+s）同时格式化代码

    1.选择Edit(编辑)->Macros(宏)->Start Macro Recording(开始录制宏),如下图: 2.直接按想要录制的快捷键,先按Ctrl+ALT+L,然后键盘按Ctr ...

  7. jQuery 标单验证

    jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方 ...

  8. phpspreadsheet 中文文档（二） 结构+自动筛选

    2019年10月11日13:55:41 原理图 自动加载器 PhpSpreadsheet依赖于Composer自动加载器.因此,在独立使用PhpSpreadsheet之前,请确保先运行composer ...

  9. VC++ 学习笔记（六）：简单C++

    到现在,我觉得终于找到学习和使用C++的基本原则了——务必简单.将其看成一个带类的C,或者将其看做标准库下的C++. C++太复杂——其实这种复杂性,所有语言都有,只是多数语言都隐藏了这种复杂性,只有 ...

  10. sourceTree安装和使用(windows)

    SourceTree的简介   SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subve ...